Sass
Sass (Syntactically Awesome Stylesheets) és un metallenguatge de nivell superior a Cascading Style Sheets (CSS) que s'utilitza per a descriure l'estil d'un document de forma neta i estructurada, amb més poder que CSS. Sass proporciona senzillesa, sintaxi més elegant i implementa diverses característiques que són útils per crear fulls d'estil manejables. Sass és una extensió de CSS3, que afegeix regles niades, variable (matemàtiques), mixins, l'herència de selecció, i molt més. És compilat al bon format estàndard CSS usant l'eina de línia d'ordres o un (entorn de treball-web).
Sass va ser creat per Hampton Catlin. Chris Eppstein es va unir a l'equip a finals de 2008. Ell i Natalie Weizenbaum han dissenyat Sass des de la versió 2.2. Eppstein és el creador de Compass, el primer entorn de treball-web basat en Sass. Eppstein viu a San José (Califòrnia) amb la seva esposa i filla. És l'arquitecte que ha programat Caring.com,[1] un lloc web dedicat als trenta-quatre milions de persones que tenen cura de persones: parentela malalta o amb disminució, o gent gran. Natalie Weizenbaum és la dissenyadora principal de Sass, i n'ha estat el principal promotor des dels seus inicis.
Exemples
Variables
/* SASS */
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
/* CSS COMPILAT */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Nesting
/* SASS */
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.2em
/* CSS COMPILAT */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
Mixins
/* SASS */
@mixin table-base
th
text-align: center
font-weight: bold
td, th
padding: 2px
@mixin left($dist)
float: left
margin-left: $dist
#data
@include left(10px)
@include table-base
/* CSS COMPILAT */
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
Selector Inheritance
/* SASS */
.error
border: 1px #f00
background: #fdd
.error.intrusion
font-size: 1.3em
font-weight: bold
.badError
@extend .error
border-width: 3px
/* CSS COMPILAT */
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
Instal·lació
Sass s'inclou amb Haml, així que per aconseguir treballar amb Sass és necessari tenir Haml instal·lat. Tingueu en compte que Sass està escrit en Ruby, pel que també és necessari tenir instal·lat Ruby. Si utilitzeu Mac OS X, ja hi és. Els usuaris de Windows poden obtenir l'instal·lable a través de la RubyInstaller per a Windows.[2] Els usuaris de Linux poden instal·lar Ruby amb el seu gestor de paquets.