Lecture
Sass (Syntactically Awesome Stylesheets) is a module included in Haml. Sass is a CSS-based metalanguage designed to increase the level of CSS code abstraction and simplify cascading style sheet files.
Sass has two syntaxes:
One of the key features of Sass is the nested rules that facilitate the process of creating and editing nested selectors.
#header
background: #FFFFFF
.error
color: # FF0000
a
text-decoration: none
&: hover
text-decoration: underline
Will be compiled into:
#header {
background: #FFFF;
}
#header .error {
color: # FF0000;
}
#header a {
text-decoration: none;
}
#header a: hover {
text-decoration: underline;
}
Sass adds constants and impurities to CSS. This makes it easier to maintain data integrity within a large set of styles. Constants allow you to set a value and use it inside styles, with the help of impurities the same can be done with a block of style attributes.
$ linkColor: # 00F a color: $ linkColor
Will be compiled into:
a {
color: # 00F;
}
An example of the use of impurities, the similarity of functions:
@mixin border-radius ($ radius, $ border, $ color) {
-webkit-border-radius: $ radius;
-moz-border-radius: $ radius;
-ms-border-radius: $ radius;
border-radius: $ radius;
border: $ border solid $ color
}
.box {@include border-radius (10px, 1px, red); }
Will be compiled:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
border: 1px solid red;
} 
Comments