Sass et TYPO3

Publié le Mis à jour le

Sass (Syntactically Awesome Stylesheets) est un langage de CSS. Il a été concu dans l’optique de simplifier la construction des feuilles de style par l’élimination de redondance.
Ainsi, il est possible de mieux distinguer la structure de vos CSS car le code est sensé être plus élégant, plus compréhensible et moins lourd. La maintenance est ainsi facilitée. Au delà de cette définition généraliste, Sass permet d’utiliser des constantes, des imbrications et d’effectuer des opérations arithmétiques au sein de vos fichiers et c’est bien là le plus intéressant.
A priori, il n’est pas très utile d’employer Sass pour des petits sites. La puissance de Sass ne s’exprime que sur des gros projets. Le gain de temps dégagé est très appréciable du coup !

Les feuilles de styles portent dès lors l’extension .SASS.

Voici un exemple assez simple :
#main p {
color: #00ff00;
width: 97%;

.redbox {
background-color: #ff0000;
color: #000000;
}
}

devient après compilation :

#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }

Ce qui permet d’éviter la répétition du sélecteur #main
Vous trouverez des exemples plus convaincants sur http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

Tout ça pour dire qu’une extension est sortie : sassify. L’extension sassify fait appel à PHamlP, un parseur SASS pour PHP. Voici le projet : PHamlP

Publicités