SASS, la réinvention du CSS

Andy WARHOL, Marylin Monroe Vous vous rappellez de <a href="http://maxula.net/posts/haml">haml</a>? Là, on va vous parler de son petit frère SASS (Syntactically Awesome StyleSheets), inutile de vous expliquer son installation c'est détaillé dans ce <a href="http://maxula.net/posts/haml" alt="haml css">post</a>. Il s'installe par défaut avec haml. Pour utiliser SASS dans vos CSS, créez un répertoire SASS sous /public/stylesheets et placez y vos fichiers ".SASS" Quand on suit le principe du "cascading" (cascade) des feuilles de style, on se pose la question : Mais pourquoi les CSS n'ont pas eu l'idée d'utiliser la même structure de SASS en arborescence, ça aura était plus facile à éditer et à modifier ??, peut-être que le prochain CSS4 appliquera la nomenclature de SASS. Voyons quelques exemples: Comme avec haml le symbole "#" traduit un identificateur "id" et le "." (point) une Classe "class" <div class="CodeRay"> <div class="code"><pre> #paragraphe p :color red :width 100% </pre></div> </div> ce qui nous donne: <div class="CodeRay"> <div class="code"><pre> #paragraphe p { color: red; width: 100%; } </pre></div> </div> A première vue, on s'économise l'écriture des accolade "{}" et des ";" qui causaient des problèmes par oubli. Les ":" ont changé de fonction et d'emplacement, dans les exemples suivants on comprendra le pourquoi. Le deuxième exemple est un cas concré qui justifie l'existence de SASS. Tout comme haml, la structure en arborescence de sass utilise le décalage à droite avec deux caractéres "espace" pour définir les noeuds de l'arbre. <div class="CodeRay"> <div class="code"><pre> #article :width 100% p, div :font-size 2em a :font-weight bold pre :font-size 3em </pre></div> </div> après compilation : <div class="CodeRay"> <div class="code"><pre> #article { width: 100%; } #article p, #article div { font-size: 2em; } #article p a, #article div a { font-weight: bold; } #article pre { font-size: 3em; } </pre></div> </div> Dans cet exemple on n'a utilisé que deux niveaux d'imbrication. En css classique, on se trouve obligé de réécrire tout la structure de chaque branche jusqu'à la racine pour chaque style. Le jour oÃ¹ on décide de changer le nom de la classe ou de l'identification, ça ne sera pas facile, sans parler d'une intégration d'un style parent tout prés de la racine. Un autre exemple particulier pour les hyperliens <div class="CodeRay"> <div class="code"><pre> a :font-weight bold :text-decoration none &:hover :text-decoration underline &:visited :color black </pre></div> </div> après compilation : <div class="CodeRay"> <div class="code"><pre> a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color:black; } </pre></div> </div> Pour de simples feuilles de style de quelques dizaines de lignes, on peut s'en passé de SASS. Mais pour des projets d'envergure avec des interfaces et templates complexes, SASS devient une necessité. De même pour l'organisation de la structure; il est plus facile de retrouver le style à changer. Sur des fichiers en CSS qui dépassent les 50ko (j'en ai vu beaucoups), on à tendance à rajouter des styles imbriqués à la fin du fichier dans la précipitation. On se retrouve avec du code éparpillé. La roulette de la souris et l'ascenceur de l'éditeur chauffent et nos yeux se fatiguent plus vite à la recherche des relations de positionnement : absolute, relative,... et ce n'est qu'un simple cas parmi d'autre quand on commence à se frotter la tête et ouvrir l'éditeur en plein écran en réduisant la taille du caractère... D'ailleurs on a trouvé comment charger encore plus les CSS par des commentaires utilisés comme repères SASS nous réserve encore d'autres surprises, l'utilisation de constantes, d'opérations arithmétiques dans une feuille de style, un sacré gain de temps à la conception et à la maintenance Voici un exemple tiré directement du <a href="http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html" alt="sass documentation">site officiel de haml-sass</a> <div class="CodeRay"> <div class="code"><pre> !main_width = 10 !unit1 = em !unit2 = px !bg_color = #a5f39e #main :background-color = !bg_color p :background-color = !bg_color + #202020 :width = !main_width + !unit1 img.thumb :width = (!main_width + 15) + !unit2 </pre></div> </div> ce qui donne <div class="CodeRay"> <div class="code"><pre> #main { background-color: #a5f39e; } #main p { background-color: #c5ffbe; width: 10em; } #main img.thumb { width: 25px; } </pre></div> </div> Le jackpot !!!, on a l'impression d'avoir un tableur avec des formules arithmétiques dans les cellules en CSS pour calculer automatiquement une mise en page. Plus la peine de recréer un CSS pour l'impression ou d'autre supports médiatiques. Place à votre imagination pour étendre des combinaisons inimaginables. Désormais, l'écriture n'est plus un exercice fastidieux, mais une épreuve d'intelligence et d'imagination Il reste encore d'autre fonctions très interessante que j'essayerais d'exposer dans un futur post 2

2009-05-27T16:45:57Z

3 SASS au delà du CSS

image/png

marylin.png

23528

Vous vous rappellez de haml? Là, on va vous parler de son petit frère SASS (Syntactically Awesome StyleSheets), inutile de vous expliquer son installation c'est détaillé dans ... SASS, la réinvention du CSS

2009-08-24T22:06:05Z

sass