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:

• Sass Basics
• Recommened Tutorial: Sass Guidelines
• Documentation