Le 'sub-theming' avec LESS, SASS et COMPASS

Transcription

1 Le 'sub-theming' avec LESS, SASS et COMPASS Par Sylvain Aubé Intégrateur Web, Whisky Echo Bravo Track : Design/Usability Niveau : débutant

2

3

4 À propos du présentateur twitter.com/sylvainaube Organisateur de Drupal BBQs! Perspective d'un «Themer» Drupal Expérience récente avec les préprocesseurs

5

6

7

8 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)

9 Ce que nous ne verrons pas Ruby HAML LESS/SASS intermédiaire et avancé Le futur ; )

10 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)

11 Préprocesseurs CSS SASS et LESS ne sont que deux préprocesseurs parmi une multitude. bit.ly/csspreprocessors

12 Pseudo-code.awesome yeah(1);

13 Pseudo-code -webkit-yeah: 1!; -moz-yeah: 1; -o-yeah: 1; -ms-yeah: 1; -khtml-yeah: 1; yeah: 1; (merci à john albin)

14 Less ou SASS???

15 LESS ou SASS??? Facilité d'installation? Serveur en production? Auto-compilation? Grammaire? Communauté? Librairies et extensions?

16 LESS

17 LESS install <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>

18 More Yay!, less BOF!.box-shadow @blur rgba(0, 0, #f938ab; color: saturate(@base, 5%); border-color: lighten(@base, 30%); div {.box-shadow(0, 0, 5px, 0.4) Source :

19 SASS

20 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

21 Différences entre SASS et LESS

22 Différences entre SASS et LESS Sass $color: red; div { color: $color; red; div {

23 Différences entre SASS et LESS bordered($width: 2px) { border $width solid black; #menu a bordered(4px) LESS.bordered(@width: 2px) { solid black; #menu a {.bordered(4px);

24 SASS seulement Structures lightness($color) > 30% { background-color: { background-color: white; $i from 1px to 10px {.border-#{i { border: $i solid blue;

25 LESS seulement #bundle red; span { width: 200px;.foo { #bundle > span; border: 1px solid #bundle[@color]; color: #bundle['color'];

26 Install fest!

27 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

28 Compass App

29 Demo Time! Préalables : - ligne de commande - SASS installé - Compass installé - copie récente de Drupal (7.8)

30 Demo Time Option 1 : Dans sites/all/themes/nomdutheme «$ compass create nomdutheme»

31 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

32 Compass Watch $ Compass watch $ Sass - - compass - -watch nomdutheme:css -r

33 Tronc commun Principes communs à SASS et LESS

34 - «Mixins» - Variables - «Nested Rules» - Fonctions et +

35 Variables // #4D926F; #header { h2 { /* Compiled CSS */ #header { color: #4D926F; h2 { color: #4D926F;

36 Variables + Fonctions lighten(@color, 10%); darken(@color, 10%); // return a color which is 10% *lighter* // return a color which is 10% *darker* saturate(@color, 10%); // return a color 10% *more* saturated desaturate(@color, 10%); // return a color 10% *less* #f04615; (...).class { color: saturate(@base, 5%); background-color: lighten(@base, 25%);

37 Fonctions / Operations // #842210; #header { * 3; * 2; #footer { + #003300; border-color: desaturate(@base, 5%); /* Compiled CSS */ #header { color: #333; border-left: 1px; border-right: 2px; #footer { color: #114411; border-color: #7d2717;

38 «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.»

39 «Mixins» // LESS /* Compiled CSS */.rounded-corners 5px) { #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;

40 «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) {

41 «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;

42 CSS2SASS

43 Compass

44 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é)

45 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*».

46 Exemples de patterns - border-radius (Boutons à coins ronds) - box-shadow (ombres) - font-face (webfonts) - text-replacement - clearfix - dégradés sur les boutons - tables - liens - etc...

47 CSS3

48 Compass : replace-text($img, $x = 50%, $y = 50%) { text-indent: -9999em; overflow: hidden; background: { image: image_url($img); repeat: no-repeat; position: $x $y;

49 Compass : appeller /* Compass Libraries "compass/css3"; h1 replace-text(/images/logo.png); font: { size: 120%; weight: bold;

50 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;

51 Compass

52 Compass comme framework (thème parent) Quelles possibilités les préprocesseurs nous offrent-ils pour l'avenir de nos thèmes?

53 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

54 Quoi mettre dans le thème enfant? Charte graphique unique au site SASS, mixins supplémentaires Styles imbriqués Module Styleguide

55 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)

56 Merci! twitter.com/sylvainaube

57 Le 'sub-theming' avec LESS, SASS et COMPASS Par Sylvain Aubé Intégrateur Web, Whisky Echo Bravo Track : Design/Usability Niveau : débutant