denkwerk TechTalk

SASS (Syntactically Awesome Stylesheets)

"There is a migration tool that helps to bring old projects to the latest version of SASS using @use and @forward."

Špela Slivšek Developer at denkwerk

@import is replaced

Špela knows: The biggest disadvantage of the old @import rule is that it cannot be targeted. This can cause difficulties because not only is the order of calls relevant, but styles are also easily overwritten: If an error occurs, this often makes it difficult for developers of larger projects to find out the cause.

For more efficiency in development: @use and @forward

Not so with the SASS rules @forward and @use: Both isolate the source of the code much better, allow more targeted imports, since each source file is considered an isolated module - and thus ultimately provide for more efficiency and clarity in the code as well as an ease in debugging.

Many SASS developers now turn primarily to @use as a "Swiss army knife." However, according to Špela, this is not always sensible:

"@use can be used to import variables, mixins and functions as well as styling rules, however this can cause performance issues during compilation."

Špela Slivšek Developer at denkwerk

So especially for larger projects, using @forward can have a positive impact on build performance. To make the transition as easy as possible, @forward can largely replace the old @import.

Be careful, however, when using the migration tool: "The migration tool can be tricky," Špela warns. "I had errors on every line in one project". The cause is poor recognition of individual programming styles, which ultimately caused blanks to cause errors. So manual adjustment can't always be avoided.

At the end of the day, however, using the modern rules @forward and @use makes for much more efficient use of SASS code and can make life much easier for CSS programmers – and our projects benefit from this.