bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/Advanced Styling
CSS•Advanced Styling

Sass Tutorial

Concept visual

Sass Tutorial

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

Learn Sass

Formula

Sass is a CSS pre - processor.

Sass reduces repetition of CSS and therefore saves time. Start learning Sass now » 🏁

Examples in Each Chapter

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;
}

Sass Function References

At W3Schools you will find complete references of all Sass functions with syntax and examples.

String Functions

Numeric Functions

List Functions

Map Functions

Selector Functions

Introspection Functions

Color Functions

❮ Home

Previous

CSS Rounded Corners

Next

CSS Rounded Corners Code Challenge