Pheelit.fr

Sass est une "extension" au Css3, ajoutant des règles imbriqués, variables, mixins, des héritages de sélections et pleins de petits éléments sympas.

Pourquoi Sass (de son petit nom Syntactically Awesome StyleSheets) me direz vous et pas continuer à développer avec Less ? Less c'est bien mais Sass est encore mieux. Il va au delà de ce que pouvait faire Less. Je vous conseille de lire cette présentation / tutoriel, nous risquons d'en voir de plus en plus !

Passons en revue les différents éléments que rajoutes Sass:

Les variables

Les variables vont vous permettre d'uniformiser votre code Css et de ne pas répéter plusieurs fois vos codes couleurs, marge, border etc.

Prenons un exemple de fichier .sass

$blue: #3b3b3b;
$margin: 14px;
 
.content
    border-color: $blue
    margin-top: $margin / 2
    color: darken( $blue, 9% ) 

 Vous pouvez remarquez que les acollades, point virgules et autres ont disparus. Il est possible, comme pour le margin-top, de demander à faire des calculs directement !!! Pour la liste complète des functions disponibles je vous laisse vous rendre sur le site officiel de Sass

Les règles imbriquées

Fini de marquer en css des choses du style

table.hl {
    margin: 10px 0; 
table.hl td.ln {
    text-align: right;
}

en Saas cela donne:

table.hl
    margin: 10px 0
    td.ln
        text-align: right

Vous pouvez très bien imaginer faire de la même manière pour toutes les balises (ex avec border: border-size, border-color, border-style etc.)

Mixins

Sous ce nom étrange, ce cache tout simplement un mécanisme vous permettant de réutiliser une portion de code, de la même manière que les fonctions php, java, C, etc.

L'écriture est simple en sass (exemple _mymixin.sass)

@mixin border ($size: 2px, $color: black)
    border-size: $size 
    border-color:  $color
    border-style: solid

Dans note fichier common.sass nous aurons:

@include mymixin 
 
.content
    @include border()
    text-align: center
    color: #3DB221 

kj

L'héritage

Là, cela devient de plus en plus interessant. Imaginez vers de l'héritage de classe Css ! Saas le fait. Voici un exemple du site officiel:

.error
  border: 1px #f00
  background: #fdd
 
.error.intrusion
  font-size: 1.3em
  font-weight: bold
 
.badError
  @extend .error
  border-width: 3px

Ce qui génère en css

/* CSS */
.error, .badError {
  border: 1px #f00;
  background: #fdd;
}
 
.error.intrusion,.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}
 
.badError {
  border-width: 3px;
}

Si cette petite présentation vous a bien motiver je vous laisse vous redirigez vers le documentation officiel sur http://sass-lang.com/