Le 'sub-theming' avec LESS, SASS et COMPASS Par Sylvain Aubé Intégrateur Web, Whisky Echo Bravo Track : Design/Usability Niveau : débutant www.drupalcampmontreal.com
À propos du présentateur twitter.com/sylvainaube Organisateur de Drupal BBQs! Perspective d'un «Themer» Drupal Expérience récente avec les préprocesseurs
Qu'allons-nous apprendre? Distinguer LESS de SASS et Compass Installer ces outils sur votre plateforme Comprendre les concepts de base Intégrer à notre workflow Drupal (incluant le subtheming)
Ce que nous ne verrons pas Ruby HAML LESS/SASS intermédiaire et avancé Le futur ; )
Pourquoi? Des feuilles de style de 3000 lignes? Différents éditeurs pour un même projet Pour utiliser CSS3 maintenant Pour avoir du support sur les navigateurs Pour ne pas repartir à zéro (Design patterns pour les tâches courantes)
Préprocesseurs CSS SASS et LESS ne sont que deux préprocesseurs parmi une multitude. bit.ly/csspreprocessors
Pseudo-code.awesome { @include yeah(1);
Pseudo-code -webkit-yeah: 1!; -moz-yeah: 1; -o-yeah: 1; -ms-yeah: 1; -khtml-yeah: 1; yeah: 1; (merci à john albin)
Less ou SASS???
LESS ou SASS??? Facilité d'installation? Serveur en production? Auto-compilation? Grammaire? Communauté? Librairies et extensions?
LESS http://lesscss.org/
LESS install <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
More Yay!, less BOF!.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { @val: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @val; -webkit-box-shadow: @val; -moz-box-shadow: @val;.box { @base: #f938ab; color: saturate(@base, 5%); border-color: lighten(@base, 30%); div {.box-shadow(0, 0, 5px, 0.4) Source : http://lesscss.org/
SASS http://sass-lang.com/
SASS - Originaire de l'environnement Ruby - Jumelé à HAML, mais pas nécessairement - Grammaire SASS - Grammaire SCSS, métissage avec LESS et CSS. - Compatible avec la librairie COMPASS
Différences entre SASS et LESS https://gist.github.com/674726
Différences entre SASS et LESS Sass $color: red; div { color: $color; Less @color: red; div { color: @color;
Différences entre SASS et LESS SASS @mixin bordered($width: 2px) { border $width solid black; #menu a { @include bordered(4px) LESS.bordered(@width: 2px) { border: @width solid black; #menu a {.bordered(4px);
SASS seulement Structures conditionelles: @if lightness($color) > 30% { background-color: black; @else { background-color: white; Loops: @for $i from 1px to 10px {.border-#{i { border: $i solid blue;
LESS seulement #bundle { @color: red; color: @color; span { width: 200px;.foo { #bundle > span; border: 1px solid #bundle[@color]; color: #bundle['color'];
Install fest!
Linux $ sudo apt-get install ruby $ sudo apt-get install rubygems1.8 $ sudo gem update --system Dans ~/.bashrc: "export PATH=$PATH:/var/lib/gems/1.8/bin" $ sass -v $ sudo gem install compass
Compass App
Demo Time! Préalables : - ligne de commande - SASS installé - Compass installé - copie récente de Drupal (7.8)
Demo Time Option 1 : Dans sites/all/themes/nomdutheme «$ compass create nomdutheme»
Mon premier SASS $ compass create <myproject> --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images" config.rb : css_dir : css javascripts_dir : js images_dir : images
Compass Watch $ Compass watch $ Sass - - compass - -watch nomdutheme:css -r
Tronc commun Principes communs à SASS et LESS
- «Mixins» - Variables - «Nested Rules» - Fonctions et +
Variables // LESS @color: #4D926F; #header { color: @color; h2 { color: @color; /* Compiled CSS */ #header { color: #4D926F; h2 { color: #4D926F;
Variables + Fonctions lighten(@color, 10%); darken(@color, 10%); // return a color which is 10% *lighter* than @color // return a color which is 10% *darker* than @color saturate(@color, 10%); // return a color 10% *more* saturated than @color desaturate(@color, 10%); // return a color 10% *less* saturated than @color @base: #f04615; (...).class { color: saturate(@base, 5%); background-color: lighten(@base, 25%);
Fonctions / Operations // LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; #footer { color: @base-color + #003300; border-color: desaturate(@base, 5%); /* Compiled CSS */ #header { color: #333; border-left: 1px; border-right: 2px; #footer { color: #114411; border-color: #7d2717;
«Mixins» «Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.»
«Mixins» // LESS /* Compiled CSS */.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; #header {.rounded-corners; #footer {.rounded-corners(@radius : 10px) #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
«Parametric mixins» «LESS has a special type of ruleset which can be mixed in like classes, but accepts parameters. Here s the canonical example:».border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius;
«Nested rules» // LESS #header { h1 { font-size: 26px; font-weight: bold; p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px /* Compiled CSS */ #header h1 { font-size: 26px; font-weight: bold; #header p { font-size: 12px; #header p a { text-decoration: none; #header p a:hover { border-width: 1px;
CSS2SASS http://css2sass.heroku.com/
Compass
3e partie : créer et étendre son framework avec Compass - Compass est une librairie - Avec Compass, vos 20 premiers mixins sont écrits (+ optimisé par la communauté)
Compass : Stylesheet Framework «Compass is a stylesheet authoring tool that uses the Sass stylesheet language to make your stylesheets smaller and your web site easier to maintain». «Compass provides ports of the best of breed css frameworks that you can use without forcing you to use their presentational class names*».
Exemples de patterns - border-radius (Boutons à coins ronds) - box-shadow (ombres) - font-face (webfonts) - text-replacement - clearfix - dégradés sur les boutons - @inline-list - tables - liens - etc...
CSS3
Compass : définir @mixin replace-text($img, $x = 50%, $y = 50%) { text-indent: -9999em; overflow: hidden; background: { image: image_url($img); repeat: no-repeat; position: $x $y;
Compass : appeller /* Compass Libraries */ @import "compass/css3"; h1 { @include replace-text(/images/logo.png); font: { size: 120%; weight: bold;
Compass : Résultat CSS h1 { text-indent: -9999em; overflow: hidden; background-image: image_url(/images/logo.png); background-repeat: no-repeat; background-position: 50% 50%; font-size: 120%; font-weight: bold;
Compass
Compass comme framework (thème parent) Quelles possibilités les préprocesseurs nous offrent-ils pour l'avenir de nos thèmes?
Quoi mettre dans le theme parent? - «reset» - «grids» - «design patterns» - éléments qui reviennent dans chacun des sites - attention aux valeurs par défaut trop contraignantes
Quoi mettre dans le thème enfant? Charte graphique unique au site SASS, mixins supplémentaires Styles imbriqués Module Styleguide
Qu'avons-nous appris? Distinguer LESS de SASS et Compass Installer ces outils sur votre plateforme Comprendre les concepts de base Intégrer à notre workflow Drupal (incluant le subtheming)
Merci! twitter.com/sylvainaube
Le 'sub-theming' avec LESS, SASS et COMPASS Par Sylvain Aubé Intégrateur Web, Whisky Echo Bravo Track : Design/Usability Niveau : débutant www.drupalcampmontreal.com