Developer Docs

Introduction to SCSS

SCSS is a superset of CSS used for styling the client-side. In essence, SCSS is a more advanced version of CSS that provides cleaner, more managable styling, and a significant upgrade in functionality. SCSS offers the use of features such as: variables, operators, nested syntax, functions, and many more.

The following example of variable usage was taken from the LMS example project (typography.scss). We encourage you to look at the other .scss files for more examples.

$body-font-family: 'Lato', sans-serif;
$base-font-size: convert-rem(16px);

p {
    font-family: $body-font-family;
    font-size: $base-font-size;

Use the links below to learn more about SCSS (Sass), and answer the questions below to test your knowledge of SCSS.

Learn more:

Was this article helpful?

Thanks for your feedback!

If you would like to tell us more, please click on the link below to send us a message with more details.







On this page

New to Codebots?

We know our software can be complicated, so we are always happy to have a chat if you have any questions.