05/01/2012

Jeudi c'est Sass

gem install sass

Qu’est-ce que Sass ?

Sass, c’est l’outil du Webdesigner moderne qui en a marre de perdre du temps. C’est une façon d’écrire la CSS sans se répéter en utilisant des variables, des fonctions, des opérateurs. Et comme un exemple est toujours plus parlant qu’un long discours :

Sass

@mixin dim($height, $width: 895px)
  width: $width
  height: $height
@mixin pos($position: relative, $float: left)
  position: $position
  float: $float
#topNav
  @include pos()
  @include dim($height: 90px)
  margin: 0
  padding: 0
  ul
    @include pos($position: relative, $float: right)
    margin: 0 0 0 0
    li
      @include pos()
      margin: 0 0 0 20px
      a
        &:link, &:visited
          font-size: 12px
          color: #000
          text-decoration: none
          background: #eaeaea
          border: 0
          padding: 3px 6px 3px 6px
          line-height: 18px
        &:hover
          color: #fff
          background: #000

CSS générée

#topNav {
  position: relative;
  float: left;
  width: 895px;
  height: 90px;
  margin: 0;
  padding: 0; 
}
#topNav ul {
  position: relative;
  float: right;
  margin: 0 0 0 0; 
}
#topNav ul li {
  position: relative;
  float: left;
  margin: 0 0 0 20px; 
}
#topNav ul li a:link, #topNav ul li a:visited {
  font-size: 12px;
  color: black;
  text-decoration: none;
  background: #eaeaea;
  border: 0;
  padding: 3px 6px 3px 6px;
  line-height: 18px; 
}
#topNav ul li a:hover {
  color: white;
  background: black; 
}

Pour que la magie s’opère :

sass —watch monsass.sass:macss.css

Chaque changement sur le fichier .sass générera automatiquement la feuille de style .css correspondante, tant que le script sera actif.

Maintenant que vous savez à quoi sert Sass et pourquoi cela peut vous faire gagner du temps il ne reste plus qu’à y aller !

Quelques liens utiles :