Sass--or Syntactically Awesome StyleSheets--is "an extension of CSS that adds power and elegance to the basic language" (Sass docs).
It provides us with several handy features that help keep CSS clean and functional.
You can think of it as a set of tools which make styling your website easier; kind of like trading a screw-driver for a powerdrill.
(Warning: jargon ahead) Sass is a scripting language which is interpreted in CSS by a preprocessor. It actually has two syntaxes!
The first, Sass (.sass file extension), is an indented syntax similar to haml. This means that blocks are determined by whitespace. This syntax is older, and has fallen out of style.
The second, Sassy CSS (.scss file extension), is an extension of CSS3 syntax. Any valid CSS statement is also a valid SCSS statement, which makes it more user-friendly.
sass-convert will convert between the two.
Sass has a couple of really cool features that I will be covering today:
You read right--Sass uses variables!
$primary: #B2D5BA;
$secondary: #3299BB;
$font: 'Open Sans', sans-serif;
h1, h2, h3, h4, p, a{
font-family: $font;
color: $secondary;
}
article{
background: $primary;
}
Sass supports nesting your statements.
#navigation{
width: 100%;
background: $secondary;
li{
display: inline-block;
}
p{
font-size: 16px;
}
}
No more redundant and unorganized code!
You can inherit from other elements, then modify them to the element you're currently styling
.block{
@extend .other-block;
color:
Basically macros, with a cute name
@mixin border-radius($radius){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.box {@include border-radius(10px);}
Although the types must match up (no 100%-70px), you can also perform basic arithmetic with your css
$width: 500px;
$height: 200px;
div{
width: ($width/$height);
}
If, for, each, while...