SCSS: Difference between revisions
Damyon Wiese (talk | contribs) No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
{{Moodle 3.2}} | |||
== Overview == | == Overview == | ||
Line 4: | Line 5: | ||
Browsers don't interpret it themselves, however, so SCSS files need to be converted into normal CSS before use. | 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: | 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: | ||
Line 12: | Line 15: | ||
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. | 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: | |||
<code> | |||
@import "../../boost/scss/moodle"; | |||
</code> | |||
The path needs to be relative and not absolute. You would use it like this: | |||
Moodle's | <code> | ||
$brand-primary: #00acdf !default; | |||
$my-color: #ff9900 !default; | |||
@import "../../boost/scss/moodle"; | |||
body { | |||
background-color: $my-color; | |||
} | |||
</code> | |||
== Example == | |||
Moodle's Boost theme has rules written using SCSS. | |||
== See also == | == See also == | ||
[http://sass-lang.com/ Sass official page] | |||
[[Category:Themes]] | [[Category:Themes]] |
Revision as of 06:00, 2 December 2016
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:
$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.