The main objective of this change is improving performance – rather than loading six CSS files (more with custom CSS), the website will load only one minified CSS file containing all the code. Custom CSS can be added by overriding theme’s assets/css/custom.scss.
Sass syntax does have some nice features however. In particular, it allows grouping related selectors in a single block which helps readability a lot. I’m not using any special syntax here yet, the files are merely renamed.
I would have preferred not executing main.scss as a template and rather exposing .Site.Params to it as Sass variables instead (see vars option). However, Sass doesn’t currently support conditional imports. So deciding what to import based on these variables wouldn’t be possible.
Note that various Bootstrap CSS files are still being placed into the vendor directory. This can be avoided by placing the files used under assets and removing the unused files.
The main objective of this change is improving performance – rather than loading six CSS files (more with custom CSS), the website will load only one minified CSS file containing all the code. Custom CSS can be added by overriding theme’s
assets/css/custom.scss.Sass syntax does have some nice features however. In particular, it allows grouping related selectors in a single block which helps readability a lot. I’m not using any special syntax here yet, the files are merely renamed.
I would have preferred not executing
main.scssas a template and rather exposing.Site.Paramsto it as Sass variables instead (see vars option). However, Sass doesn’t currently support conditional imports. So deciding what to import based on these variables wouldn’t be possible.Note that various Bootstrap CSS files are still being placed into the
vendordirectory. This can be avoided by placing the files used underassetsand removing the unused files.