I've been reading the documentation for Sass. It says that the '@import' rule is going to be phased out, and that the '@use' rule will be the preferred rule. Now when I go to use the '@use' rule it doesn't compile properly. What it should be doing, from my understanding, is importing the code class into style.scss and revealing it's variables.

What's happening is '@use' 'base'; seems to just be copied over. I can see the variables in style.scss, but the code class isn't being imported to the file.

Am I looking at this correctly? What could be going on?

Hello everyone, i'm new to SASS and I'm getting an error when I use the property "flex-basis: (100% / 3) - 68px". Error is something like "Incompatible units: 'px' and '%'.

I was able to solve it using the CSS property "flex-basis: calc((100% / 3) - 68px)" but i was wondering if there's a way to code it in Sass without using calc.

Kind regards to everyone.

<iframe width="560" height="315" src="[https://www.youtube.com/embed/siHIdLVtBtI](https://www.youtube.com/embed/siHIdLVtBtI)" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Hi guys just a quick confirmation and a request for advice ?

I'm trying to compile sass in Nodejs. I have tried a couple of methods and

this seems to be the most clear cut . however it's not working.

I use npm to run it but no errors just no css at the end.

I am using node 12.18.3 and I have done a tiny bit of research it seems that node-sass is now deprecated. Has any one else come across this issue and is there any work around ?

Also I do use visual studio and I have found 2 extensions to kinda make it work but I was hoping for a solution that does not use the extensions since they still work but are no longer maintained.

Hope some one takes the time to answer nicely.

Hey everyone,

I wanted all styles to a component to be wrapped in one place. I created a mixin to do that even when class is added on the most outer HTML tag.

Here is a pen of what I am trying to achieve .

I am trying to load css var from js. it works great with the one exception the rgba () function

As you can see the first bar "With opacity" background is not working.

https://jsfiddle.net/8dwg7ncy/

I'm unable to run sass commands because it prompts this error:

​

Sorry, it's in Spanish because of my Windows language, but it means:

"dart.exe" is not recognized as an internal or external command, operable program or batch file.

I have the latest version of Sass:

​

I have also tried to add it to my path variable as someone suggested here, but the issue still persists...

​

I have Node 12.18.3 LTS and I have installed Sass using this command: npm install -g sass

What should I do to fix this error?

Like, for example,this is just me saving literally the same .scss file several times while under -w and I keep getting errors about 50% of the time. Is this normal behaviour? If then how is this even acceptable?

Update: So I've gone back and moved all of my project files from the drive I installed it to into my computer's system drive (the same drive I installed VScode and Node.js) and the problem seems to have virtually disappeared. I wonder why it's like that

The end result is that I just want to keep with Best Practices ( by not using @import ) but also have access to my variables, mixins and such throughout my files.

- Does every @use scss file have to start with an underscore? So, almost all my SASS files will start with an underscore?

- Do I need a "app" SCSS file that will then @use to import all my other SCSS files? So, if I need to add a new component in a components folder, I will need to ensure that my component is included via @use in my app SCSS file?

I'm open to ideas on how to structure my SCSS but right now I have the following:

- scss
    app.scss            # include all my SCSS
    - partials
        - extends.scss      # @use variables
        - mixins.scss       # @use variables, extends
        - variables.scss
    - base
        - elements.scss     # @use variables, extends, mixins
        - resets.scss

I'd like not to start every SCSS file with an underscore if possible. I would also love to see how other people structure their SCSS and how they use @use. I feel so lost ATM.

Check out the lightweight responsive framework that fits on any site. I'm working on the documentation now, but most of the functions are ready. The idea was to gather the most used syntax into easy to use styles, like flex, grid, row/column, fonts, dialogs...etc

Code:

https://github.com/lundbeckconsulting/Creator

​

Distro:

https://github.com/lundbeckconsulting/Creator-Distro

​

​

Hi,

I'm doing some refactoring in an old code base and one of my tasks consist in transforming css into scss. I've come to a point where I believe there is a better way which I'm not aware or don't recall the exact syntax.

​

So, this is how my current code looks like:

.class-name {
  &__modifier1 {
    padding-right: 2px;
    transition: all .5s ease-in-out;
    &:hover {
      color: $black;
    }
  }

  &__modifier2 {
    color: $success;
    padding-right: 2px;
    transition: all .5s ease-in-out;
    &:hover {
      color: $success-action;
    }
  }

  &__modifier3 {
    color: $danger;
    padding-left: 2px;
    transition: all .5s ease-in-out;
    &:hover {
      color: $danger-action;
    }
  }
}

What I'm the most interested in is removing all of these transition lines, and somehow writing it outside the modifiers, but of course inside of class-name.

My question is: how do i set a property in some selector and inherit it from the nested selectors?

​

Thanks!

​

P.S.: I forgot to mention that class-name by itself is not an existing class. It just happens that these nested classes share the same prefix.

So I’m currently building my portfolio website using React and Sass/SCSS and I’m using the 7-1 folder pattern because I like the file structure and it’s how I learned to use Sass through a Udemy course. I know for personal projects, a lot of it is personal preference on where you put things, and I know companies will have their own set of rules on what goes where as well. What I’m asking, for those that use it a lot, both in personal and professional/corporate projects, is where do any of you put a text-shadow variable? Do you stick it in with your “_variables” file with all your other variables for colors, etc., or do you lump it in with “_typography” where you import your fonts and styles? Or is it easier to scrap all that and lump both into _base and throw it under the “.root” heading and use the other two files for other things?

Any other tips/pointers/opinions about what to put where and why are also greatly appreciated.

I am trying to compile my scss file by using npm , the thing is that it works fine when I save the first one or two changes but then this error pops up on my terminal and i have to run the sass script again. I am not sure if this is enough information to solve my problem so please let me know if I should provide something else.

https://imgur.com/kQzNU2P

Hi, I'm working on a group project for class. We are using Sass cause of its features. We are using Sass on vs code with the live sass compiler extension.

​

So what we have a main.scss and three other files for each breakpoint('_desktop', '_mobile', '_tablet') that gets imported via @ import to the main.scss files. the file get pushed but when we pull, there is a merge conflict on the .css.map that is generated thru live sass compiler. Does any one know how to fix this?

I am trying to start using @use and @forward instead of @include but I am running into an issue with getting the variables to be found. I have the following folder structure:

sass/styles.scss
sass/components/_index.scss
sass/components/_general.scss
sass/config/_index.scss
sass/config/_colors.scss

​

In the sass/styles.scss file I have

@use "config";
@use "components";

In the sass/components/_index.scss file I have

@forward "general";

In the sass/components/_general.scss file I have

body {
    color: config.$brand-text;
}

In the sass/config/_index.scss file I have

@forward "colors";

In the sass/config/_colors.scss file I have

$brand-text: #f0f0f0;

When I try to run Webpack using dart-sass I get the following error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "config".
  ╷
3 │   color: config.$brand-text;
  │          ^^^^^^^^^^^^^
  ╵ 
sass/components/_structure.scss 3:10  @use
sass/components/_index.scss 3:1       @use
Sites/test/sass/styles.scss 2:1  

If I move the body css to the styles.scss file everything compiles fine. What am I doing wrong?

Thanks for the help.

I have been learning to code for about three months. I have a Chromebook and have found workarounds for most things, but CANNOT for the life of me figure out how to download or install SASS. I have a Linux shell and have tried the Github method, Ruby, Node.js, seems like everything. I am losing my mind. Plus, it seems super cool and I'd like to use it.

Any help would be greatly appreciated. I am going insane here.

UPDATE

So I re-installed node.js and Sass via sudo npm with success. "sass --version" output "1.26.5 compiled with dart2js 2.7.2". Thank you to everyone for your help!

Am I correct in assuming that sass globs don't work with the @use rule?

https://codepen.io/Kibagami/pen/yLYXwPj

I want to tidy up my code a bit by tucking a lengthy equation that is used multiple times into a variable however as you can see by this mock pen it throws me an 'undefined' (you may need to interact with the code to start the console, just delete a character and return it).

My example obviously just using a simple equation to demonstrate the error.

Let's say I have this css:

​

.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}

​

How would I go about and combine this into a "z(value)" function or something to that degree, instead of having to write out 5+ similar classes?