Page History

...

1. Create your project at the root of your theme's folder.
2. Indicate the folder of your .scss files (Input folder).
3. Indicate the folder for your CSS files (Output folder).

...

Sass syntax

Compass

FontAwesome

Comments

There are two ways to add a comment to a Sass file.

The first one enables you to add comments without having them used in the final CSS file:

// This comment is not used in the CSS file.
a { color: green; }

The second one uses the regular CSS syntax, and enables you to add comments that WILL be used in the final CSS file:

/* This comment is used in the CSS file. */
a { color: green; }

Nesting

Sass enables you to nest blocks in order to define rules that apply only within that selector:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Result:

nav ul {margin: 0; padding: 0; list-style: none;}
nav li {display: inline-block;}
nav a {display: block;  padding: 6px 12px; text-decoration: none;}

Parent selector

Sass enables you to reference the parent selector in a nested block, using &:

 a {
   font-weight: bold ;
   &:hover{
     color: red ;
   }
   li & {
     font-weight: normal; 
  }
 }

Result:

a {font-weight: bold ;}
a:hover {color: red ;}
li a {font-weight: normal;}

Namespace properties

CSS can use namespace-like properties, such as font-family, font-size, etc.

You can use nesting to indicate properties within a given "namespace":

p {
  font: {
    family: arial;
    size: 1.1em;
    weight: bold;
  }
}

Result:

p {
  font-family: arial;
  font-size: 1.1em;
  font-weight: bold; 
}

CSS output formats

Sass allows 4 different kind of generated CSS.

Nested format:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

Expanded format:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

Compact format:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

Compressed format:

#main{color:#fff;background-color:#000}#main p{width:10em}

SassScript

Sass can make use of a scripting language called SassScript. It makes it possible to use variables, calculation and additional functions. It can be used for any property value.

Variables

Variables must be defined with the $ prefix:

$blue: #3bbfce;
$margin: 16px;
.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}
.border {
  padding: $margin/2;
  margin: $margin/2;
  border-color: $blue;
}

You can change the value of a variable, or have it changed only if the variable does not exist yet or is empty by using !default.

For instance:

$content: "Init Value";
$content: "Init if no value" !default;
$new_content: null;
$new_content: "Init new if no value" !default;
#main {
  content: $content;
  new-content: $new_content;
}

Result:

#main {content: "Init Value";  new-content: "Init new if no value";}

SassScript supports 6 types of variables:

• numbers (e.g. 1.2, 13, 10px)
• strings of text, with and without quotes (e.g. "foo", 'bar', baz)
• colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
• booleans (e.g. true, false)
• nulls (e.g. null)
• lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
• maps from one value to another (e.g. (key1: value1, key2: value2))

When using a string value, you can use #{} to unquote quoted strings, making it easier to use in some cases, for instance as a mixin selector:

@mixin warn-message($selector) {
  body.warn #{$selector}:before {
    content: "This is a warning !";
  }
}
@include warn-message(".header");

Result:

body.warn .header:before {content: "This is a warning !";}

You can also use the quote() and unquote() functions:

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

Result:

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Operators

Your SCSS files can directly use calculations and comparators:

• +, -, *, /, % and the <, >, <=, => number comparators.

• + to concatenate two strings.

• and, or, andnot for boolean variables.

• == and != for all variable types.

Sass can use the / operator to separate two numerical values, but Sass can use it to divide numbers. For instance:

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

...is compiled into:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

As usual, use parenthesis to handle priorities:

p {
  cursor: e + -resize;
  font-family: sans- + "serif";
   margin: 3px + 4px auto;
   width: (1em + 2em) * 3;
}

Result:

p {cursor: e-resize;  font-family: sans-serif;  margin: 7px auto;  width: 9em;}

You can also use several numerical functions:

• percentage($value) - Converts a unitless number to a percentage.

• round($value) - Rounds a number to the nearest whole number.

• ceil($value) - Rounds a number up to the next whole number.

• floor($value) - Rounds a number down to the previous whole number.

• abs($value) - Returns the absolute value of a number.

• min($numbers...) - Finds the minimum of several numbers.

• max($numbers...) - Finds the maximum of several numbers.

Lists

Sass uses lists for values such as margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif.

Lists are a series of values, separated with space or commas.

A list can contain one or more lists. For instance, "1px, 2px, 5px 6px" is made of three elements:

• 1px
• 2ps
• 5px 6px

The third element is itself a list of elements.

You have access to several list functions:

• length($list) - Returns the length of a list.

• nth($list, $n) - Returns a specific item in a list.

• join($list1, $list2, [$separator]) - Joins together two lists into one.

• append($list1, $val, [$separator]) - Appends a single value onto the end of a list.

• zip($lists...) - Combines several lists into a single multidimensional list.

• index($list, $value) - Returns the position of a value within a list.