From compass-style.org:
Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
Simply, Sass makes CSS more programmatic. For example, variables can be declared and then used later in the style sheet:
$blue: #2c78ba;
$body-font-size: 8pt;
$header-font-size: $body-font-size * 1.5;
h1 {
color: #fff;
background-color: darken($blue, 20%);
font-size: $header-font-size;
}
Sass style sheets must be compiled to be used in the browser however. See the Compiling the Theme Package section to learn how to compile Sass code. The above code compiles to:
h1 {
color: #fff;
background-color: #184368;
font-size: 12pt;
}
One of the built-in math operators was used to calculate the font size. Also, a built-in
function was used to darken the base blue color by a percentage.
Here’s another example:
1 $base-color: #2c78ba;
2 $base-dark-color: darken(adjust_hue($base-color, 3deg), 15%);
3
4 // module header variables
5 $mh-color: #fff;
6 $mh-border-color: #245d9b;
7 $mh-bg-color: #245d9b;
8 $mh-gradient: color_stops($base-dark-color, $base-color);
9 $mh-border-top-radius: 4px;
10 .moduleheader_body {
border-color: $mh-border-color;
border-style: solid;
@if $module-header-border-top-radius {
@include border-top-radius($mh-border-top-radius);
} @else {
@include border-top-radius(3px);
}
@include background-gradient($mh-bg-color, $mh-gradient);
background-repeat: repeat-x;
22 }
Line 1 is self-explanatory; a variable is being defined.
Line 2 builds on the function call in the previous example by sending the results of one function call into another function call; in this example, the result of the adjust_hue function is being darkened by 15%.
Line 8 introduces helper function used to generate color stops to be used later.
Lines 14-18 contain several important items. First, note the use of if-else logic operators. In this case, if a border radius is defined, it’s going to be used, otherwise we are using a default border radius of 3px. Note also the @include lines. @include’s are used to include mixins.
A mixin is a special type of function that allows the re-use of a block of css or sass code.
In this example, the border-top-radius mixin is used to generate all the css necessary for each browser to set the top border radius. The border-top-radius mixin looks something like this:
@mixin border-top-radius($radius) {
-moz-border-radius-topleft: $radius;
-webkit-border-top-left-radius: $radius;
-ms-border-top-left-radius: $radius;
-o-border-top-left-radius: $radius;
border-top-left-radius: $radius;
-moz-border-radius-topright: $radius;
-webkit-border-top-right-radius: $radius;
-ms-border-top-right-radius: $radius;
-o-border-top-right-radius: $radius;
border-top-right-radius: $radius;
}
Lastly, in line 20, another mixin is being used to set a background image gradient. Now that the Sass code above has been explained, the css output can be examined.
1 .moduleheader_body {
2 border-color: #245d9b;
3 border-style: solid;
4 -moz-border-radius-topleft: 4px;
5 -webkit-border-top-left-radius: 4px;
6 -ms-border-top-left-radius: 4px;
7 -o-border-top-left-radius: 4px;
8 border-top-left-radius: 4px;
9 -moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-ms-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
border-top-right-radius: 4px;
background-image: none;
background-color: #245d9b;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1d4b7c), color-stop(100%, #2c78ba));
background-image: -webkit-linear-gradient(top, #1d4b7c, #2c78ba);
background-image: -moz-linear-gradient(top, #1d4b7c, #2c78ba);
background-image: -o-linear-gradient(top, #1d4b7c, #2c78ba);
background-image: -ms-linear-gradient(top, #1d4b7c, #2c78ba);
background-image: linear-gradient(top, #1d4b7c, #2c78ba);
background-repeat: repeat-x;
23 }
The appropriate radius is applied in lines 4-13 and the gradients applied in lines
16-21.