Introduction to SCSS

This article defines SCSS and delivers and example of styling a C#Bot or SpringBot application.

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:

Ready to start building?

Sign up to Codebots today to see how much faster you can build apps with us.