sass Getting started with sass Variables


If you have a value that you use often, you can store it in a variable. You could use this to define color schemes, for example. You would only have to define your scheme once and then you could use it throughout your stylesheets.

To define a variable, you must prefix its name with the $ symbol. (Like you would in PHP.)

You can store any valid CSS property value inside a variable. Such as colors, fonts or URLs.

Example #1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;

p {
    color: rgb(25, 25, 20);
    background-color: $background;