...
- Create your project at the root of your theme's folder.
- Indicate the folder of your
.scss
files (Input folder). - 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:
Code Block |
---|
// 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:
Code Block |
---|
/* 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:
Code Block |
---|
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
} |
Result:
Code Block |
---|
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 &:
Code Block |
---|
a {
font-weight: bold ;
&:hover{
color: red ;
}
li & {
font-weight: normal;
}
} |
Result:
Code Block |
---|
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":
Code Block |
---|
p {
font: {
family: arial;
size: 1.1em;
weight: bold;
}
} |
Result:
Code Block |
---|
p {
font-family: arial;
font-size: 1.1em;
font-weight: bold;
} |
CSS output formats
Sass allows 4 different kind of generated CSS.
Nested format:
Code Block |
---|
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; } |
Expanded format:
Code Block |
---|
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
} |
Compact format:
Code Block |
---|
#main { color: #fff; background-color: #000; }
#main p { width: 10em; } |
Compressed format:
Code Block |
---|
#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:
Code Block |
---|
$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:
Code Block |
---|
$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:
Code Block |
---|
#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:
Code Block |
---|
@mixin warn-message($selector) {
body.warn #{$selector}:before {
content: "This is a warning !";
}
}
@include warn-message(".header"); |
Result:
Code Block |
---|
body.warn .header:before {content: "This is a warning !";} |
You can also use the quote()
and unquote()
functions:
Code Block |
---|
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}"); |
Result:
Code Block |
---|
@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:
Code Block |
---|
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:
Code Block |
---|
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; } |
As usual, use parenthesis to handle priorities:
Code Block |
---|
p {
cursor: e + -resize;
font-family: sans- + "serif";
margin: 3px + 4px auto;
width: (1em + 2em) * 3;
} |
Result:
Code Block |
---|
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.