CODEWITHSUNDEEP
csssassjekyll
shevket
shevket

Reputation: 173

Does jekyll support @use sass statement?

According to sass the @import statement is directed to deprecation, in favour of @use, yet in the jekyll docs there are only examples of the first kind... I however can't get the latter to work!

When I try to reference a variable from a partial _color.sass: 

$duck-blue: #199

With the use statement in some other partial _nav.sass: 

@use 'color'

.duckdiv: 
    border: 2px solid color.$duck-blue

Jekyll throws the following

Error: Invalid CSS after "...2px solid color": expected expression (e.g. 1px, bold), was ".$duck-blue; }"

While everything works if I replace @use by @import and remove the color. scope in front of the variable.

Is there something I'm getting wrong?

Upvotes: 6

Views: 686

Answers (1)

MDave
MDave

Reputation: 1375

I ran into this myself and spent a while digging, here's what I found.

Jekyll uses LibSass converter to convert SCSS to CSS. Lybsass has been deprecated now for over a year. The new modern converter is Dart Sass which includes the new @use references.

There is an open ticket in Jekyll to use dart-sass: https://github.com/jekyll/jekyll-sass-converter/issues/116

But in the meantime you can change the default sass converter by hand with a new gem: https://github.com/jekyll/jekyll-sass-converter/issues/116#issuecomment-850912425

Upvotes: 2

Related Questions