Sass

De Viquipèdia
Dreceres ràpides: navegació, cerca
Fitxer:Sass.gif
Logo oficial de Sass

Sass és un metallenguatge de nivell superior a CSS que s'utilitza per 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 (Syntactically Awesome Stylesheets) {style with attitude}[modifica | modifica el codi]

Avantatges[modifica | modifica el codi]

Sass fa CSS divertit una altra vegada. Sass és una extensió de CSS3, afegint 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 una web-marc (Framework).

L'equip de Sass[modifica | modifica el codi]

Sass va ser creat originalment per Hampton Catlin. Ell i Nathan Weizenbaum han dissenyat Sass des de la versió 2.0. Hampton viu a Jacksonville, Florida i és el desenvolupador principal mòbil per a l'enciclopèdia lliure wikipedia.[cal citació]Chris Eppstein es va unir a l'equip Sass a finals de 2008. Ell i en Nathan han dissenyat Sass des de la versió 2.2. Chris és el creador de Compass, el primer marc-web basat en Sass. Chris viu a San José (Califòrnia) amb la seva esposa i filla. Ell és l'arquitecte que ha programat Caring.com,[1] un lloc web dedicat als trenta-quatre milions de persones que tenen gent al seu càrrec, pares malalts o gent gran.

Nathan Weizenbaum és el dissenyador principal de Sass, i ha estat el principal promotor des dels seus inicis. Viu a Seattle (Washington) i voldrà treballar per a Google una vegada hagi acabat el seu últim any a la Universitat de Washington.

Exemples[modifica | modifica el codi]

Variables[modifica | modifica el codi]

/* 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[modifica | modifica el codi]

/* 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[modifica | modifica el codi]

/* 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[modifica | modifica el codi]

/* 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ó[modifica | modifica el codi]

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.

Notes[modifica | modifica el codi]

  1. [enllaç sense format] http://www.caring.com
  2. [enllaç sense format] http://rubyinstaller.org

Enllaços externs[modifica | modifica el codi]