denkwerk TechTalk
SASS (Syntactically Awesome Stylesheets)
The TechTalk at denkwerk allows our team to communicate new technologies and share existing knowledge. Especially when it comes to web technology, there is a lot going on, and the TechTalk is the ideal platform to bring employees from outside the field up to date. In doing so, we enable everyone to creatively deal with current technology trends. When it comes to internal training, we always have one goal in mind: to offer our customers the best possible advice at every level.
The new rules of the CSS extension language SASS
In the last TechTalk our developer Špela Slivšek presented modern tools in CSS development, more precisely in CSS extension language SASS ("Syntactically Awesome Stylesheets"). The classic @import rule for integrating different stylesheets into CSS projects is outdated, slow and can cause error messages when compiling complex projects. Therefore, she recommends using the newer @use and @forward rules. In the TechTalk, she explained the benefits of these new rules and how to convert projects:
"There is a migration tool that helps to bring old projects to the latest version of SASS using @use and @forward."
@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."
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.
