11.4. EdX Sass Style Guide#
This section describes the requirements and conventions used to contribute Sass stylesheets to the edX platform.
11.4.1. Code Style#
In order to standardize and enforce Open edX’s Sass coding style across multiple codebases, edX uses Stylelint which is a widely adopted CSS linter written in JavaScript. In particular, edX provides the edX Stylelint Config which is an npm package that defines the rule set to be used to validate Sass.
EdX generally adopts the standard Stylelint rule set:
If you are interested in the exceptions, see the edX Stylelint Config README.
11.4.2. Use Variables#
It is strongly recommended to avoid hard-coding values such as colors and fonts. Using hard-coded values makes it difficult to change the value in the future as it may have been used in many stylesheets. Using variables also allows themes to simply override the value in one place.
Before defining a new variable, see if you can reuse an existing one. If you
need to create a new one, be sure to use the !default
flag. This allows
themes to provide a different value for this variable if they choose. See the
Sass documentation for default flag for more details.
For example, here is an example of a hard-coded style:
.my-element {
color: #0000ff;
}
This should instead be written as:
$my-custom-color: #0000ff !default;
.my-element {
color: $my-custom-color;
}