Image
Technologie
(Savoir faire, savoir vivre)

(Savoir faire, savoir vivre)

Contenu

Donate to Pakistan Floods Appeal

SASS: Le CSS nouveau est arrivé.

Le pouvoir et l'élégance

Sass est une extension de CSS qui ajoute du pouvoir et de l'élégance au langage de base. Elle vous permet d'utiliser des variables, des règles emboitées, des mixins (ou sous-classes abstraites), des imports intégrés, et plus, tout en utilisant une syntaxe CSS-compatible. Sass vous aide à bien organiser les grandes feuilles de style, et à faire fonctionner rapidement les petites...

(Librement traduit et extrait du site SASS, http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html ).

Mon âme de programmeur

Bien que la séparation du contenu et de la présentation soit généralement acceptée comme une Bonne Chose, et feuilles de style en cascade soient considerées la meilleure méthode de réussir à ça, le langage CSS manque beaucoup en tant que langage de description des styles. Elle manque totalement de la structure, rompt la principe DRY (ne vous répétez pas) et en géneral conduit à un balisage inélégant qui serait complètement inadmissible dans un langage de programmation respectable. Bien sûr, CSS n'est pas tout à fait un langage de programmation, plutôt un méta-langage en effet, mais quand même, mon âme de programmeur se rebelle quand je dois l'utiliser.

Impressionant

SASS, « Syntactically Awesome StyleSheets », qui signifie « Les feuilles de style syntaxiquement impressionnantes » en français, est un outil effectivement impressionnant. Il fournit une couche élégante et presque orientée objet autour des éléments standards de CSS. Le script sass est compilé par la programme sass, qui donne un dossier CSS parfaitement valable. Le processus de compilation est ultra-rapide, et on peut l'inclure dans un script type construction, ou l'exécuter comme tâche de fond, ou l'inclure dans quelques IDEs ou éditeurs de texte.

Déraillé?

SASS a été conçu comme add-in pour Ruby/Rails, mais il peut être utilisé indépendamment aussi. Une fois installé, vous exécutez simplement une commande shell qui prend un fichier SASS (.scss ou .sass) et le convertit en format CSS (.css). Les fichiers de format .sass utilisent le décalage à droit pour indiquer le blocs structurels de CSS et les fichiers dans le format .scss utilisent la même syntaxe d'accolades que la norme CSS. En fait, un fichier CSS est un fichier de SASS valable, qui signifie que vous pouvez commencer par un CSS existant et migrer cela progressivement à SASS. Le format quasi-CSS de .scss est plus récent que le format de .sass, bien que le format de .sass continuera à être supporté indéfiniment.


Installation (Linux/Ubuntu)

Installez Ruby

(Bash)
$ sudo apt-get install ruby

Installez le programme d'installation des Gem

(Bash)
$ sudo apt-get install rubygems1.8

Installez le gem de Sass le plus récent

(Bash)
$ sudo gem install haml-edge

Créez liens aux programmes exécutables

Dans un répertoire dans votre variable PATH (par example, /usr/bin), créez les liens suivants:-

(Bash)
$ cd /usr/bin    #or other directory in your $PATH
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/sass
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/css2sass
$ sudo ln -s $HOME/.gem/ruby/1.8/bin/sass-convert

Usage

(Voir http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html )

(Bash)
$ sass input_file_name.scss output_file_name.css

Il y a aussi un démon disponible, qui surveillera vos dossiers SASS/ SCSS, et les compilera au moment qu'ils se changent.

Quelques exemples:

Variables
(SCSS)
$Blue: #0000FF;
background: $Blue;
Emboîtement
(SCSS)
$vert: #00ff00;
$rouge: #ff0000;
$noir: #000000;
#main p {
  color: $vert;
  width: 97%;
  .redbox {
    background-color: $rouge;
    color: $noir;
  }
}
Mixins
(SCSS)
@mixin sexy_border($color, $width: 5px) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
/* Mixin examples */
p { @include sexy_border($blue); }
h1 { @include sexy_border($blue, 2em); }

Valid XHTML 1.1 Image Image © 2010 Simon Tite, tous droits reservés