Search code examples
csssassjekyll

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?

Solution

  • 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