SCSS: Difference between revisions
Damyon Wiese (talk | contribs) No edit summary |
Damyon Wiese (talk | contribs) No edit summary |
||
| Line 10: | Line 10: | ||
</code> | </code> | ||
Moodle will look for a file named 'main.scss' in the theme/themename/scss folder and compile it. If you don't see the affect of your changes right away, try purging the caches or enabling theme designer mode. | Moodle will look for a file named 'main.scss' in the theme/themename/scss folder and compile it. If you don't see the affect of your changes right away, try purging the caches or enabling theme designer mode. This setting can also be a function which will return the SCSS to compile as a string. | ||
== The boost theme == | == The boost theme == | ||
Revision as of 07:18, 1 December 2016
Overview
SCSS or SASS Sass (Syntactically Awesome Stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. It's an advanced way of writing CSS that we use in some themes within Moodle.
Browsers don't interpret it themselves, however, so SCSS files need to be converted into normal CSS before use.
Moodle includes a built in SCSS compiler so to use SCSS in your theme, you only need to set the theme scss variable to point to the main scss file for your theme:
$THEME->scss = 'main';
Moodle will look for a file named 'main.scss' in the theme/themename/scss folder and compile it. If you don't see the affect of your changes right away, try purging the caches or enabling theme designer mode. This setting can also be a function which will return the SCSS to compile as a string.
The boost theme
Moodle's boost theme has rules written using SCSS.
