bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths

Loading lesson path

Learn/CSS/Advanced Styling
CSS•Advanced Styling

Sass Tutorial

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