SCSS

Moodle 3.2

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.

Using in a theme

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: // Points to the file theme/themename/scss/main.scss. $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.

Inheriting from a parent

Even if your theme is inheriting from a parent, the SCSS file itself will not inherit from anything, this is something you should do manually. For instance, if you want your SCSS file to include all of the SCSS code provided by theme_boost, usually to change the variables, you need to manually import the file like this:

@import "../../boost/scss/moodle";

The path needs to be relative and not absolute. You would use it like this:

$brand-primary: #00acdf !default; $my-color: #ff9900 !default;

@import "../../boost/scss/moodle";

body {

   background-color: $my-color;

}

Example

Moodle's Boost theme has rules written using SCSS.

See also

Sass official website