0

I have been using LESS for years and am only just trying out SASS. I am having trouble with a very basic thing so I hope someone can help me out.

What I want to achieve is:

  • a file theme.scss (which is compiled into theme.css) contains separate components (for header, navigation, font etc.)
  • define variables for things like brand colours to be re-used in the components

I have got it to work with @import, but because that is (going to be) deprecated I want to use @use instead. According to https://sass-lang.com/documentation/at-rules/use that should be possible.

My file setup is like this:

|- style
   |- _definitions.scss
   |- theme.scss
   |- components
      |- component.scss

Then I have this in the files:

// theme.scss
@use 'definitions';
@use 'components/component.scss';

// _definitions.scss
$base-color: blue;

// components/component.scss
body {
    background: $base-color;
}

But this doesn't work: my compiler (I'm using Prepros) just says it can't find the variable $base-color. :( Note: if I replace @use by @import it works just fine.

Help?

Emleh
  • 5
  • 1
  • 2

1 Answers1

0

@import will never be depricated. Sass' devs are a sleepy bunch of ****. @use is only supported by Dart-Sass yet, I assume you are using Node-Sass, which most are. Therefor you need to use @import, which makes in most use cases no difference.

You can find the info right under the heading, its the first line, virtually everbody skips.

Simplicius
  • 2,009
  • 1
  • 5
  • 19
  • 1
    Ahh that explains it - thank you so much! :-) I didn't know there were different types of Sass (again, I am just beginning...). When searching for '''@import''' I came across this: https://sass-lang.com/documentation/at-rules/import#main-content - which led me to conclude '''@use''' was the way to go. But yeah, if it doesn't actually work, then... :P I will continue with '''@import'''. – Emleh Aug 29 '20 at 14:45