bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/Advanced Styling
CSS•Advanced Styling

Sass Tutorial

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind Sass Tutorial?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

/* Define standard variables and values ___ website */
3Order

Put the learning moves in the order that makes the concept easiest to apply.

Our "Show Sass" tool makes it easy to learn Sass, it shows both the code and the result.
Sass reduces repetition of CSS and therefore saves time.
Sass is a CSS pre-processor.

Learn Sass

Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves time.

Our "Show Sass" tool makes it easy to learn Sass, it shows both the code and the result.

Sass Example

/* Define standard variables and values for website */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* Use the variables */
body {
 background-color: $bgcolor;
 color: $textcolor;
 font-size: $fontsize;
}

Previous

CSS Rounded Corners

Next

CSS Border Images