Css: more or Less ?Julien RocheHuman Talks Grenoble – 12/03/2013
Speaker     Julien Roche                    @rochejul     Ingénieur d’étude et formateur sur Java, Web et Web Mobile pou...
Et pour faire la présentation …                         … racontons une jolie histoire                                    ...
Il était une fois                        … un site Web                                        44
Sur ce site Web                      … j’ai rencontré du CSS (… entre autre …)                                            ...
Je suis content car …                               ■ Le CSS permet de définir des styles au                              ...
Mais soudain …                     … le drame                                  77
On doit faire face à …    … une structuration complexe                    … du code difficile à maintenir… du code en quan...
Mais une lueur d’espoir …    http://lesscss.org/              https://github.com/cloudhead/less.js                        ...
J’ai enfin un outil ! (1)         ■ Vous devez créer des fichiers avec l’extension           “.less”         ■ Ensuite, Le...
J’ai enfin un outil ! (2)      Importer le fichier JavaScript “less.js” dans votre page, qui va       compiler à la volée...
J’ai enfin un outil ! (3)     ■ utiliser RhinoJS / NodeJs pour compiler les fichiers Less en CSS       directement !!12
J’ai enfin des variables !     @black:                 #000;     @gray:                  rgba(85, 85, 85);     @white:    ...
J’ai enfin des méthodes !.text-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  box-shadow: @arguments;                 ...
Je peux facilement séparer mes fichiers !     /* Fichier a.less */     @a: red;     @b: blue;     @c: green;              ...
J’ai un code structurant !     /* CSS */                                                      // Less     table {         ...
J’ai des méthodes supplémentaires !                                                 // Commenter avec “//” !!             ...
Et plein d’autres choses encore !     Documentation (officielle ou non)          Outils     http://lesscss.org/#docs      ...
Prochain SlideShare
Chargement dans…5
×

Css.more.or.less

770 vues

Publié le

Il n’existe à ce jour plus une seule application Web qui n’utilise pas « CSS », ces fichiers qui permettent de styliser son application. Aujourd’hui, « CSS3 » nous permet d’écrire des applications du plus en plus attrayantes mais n’est pas encore idéal puisque nous constatons des manques comme par exemple la définition de constantes de couleurs, chose appréciable pour les sites en marque blanche. Notons également la difficulté pour factoriser et maintenir ce code.

Une lueur d’espoir est apparue, grâce à « Less ». C’est un framework qui non seulement nous facilite l’écriture de nos fichiers CSS, mais nous aide également à les maintenir et à mieux les structurer, tout en ayant des outils que nous pouvons utiliser dans nos usines logiciels.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
770
Sur SlideShare
0
Issues des intégrations
0
Intégrations
91
Actions
Partages
0
Téléchargements
1
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Css.more.or.less

  1. 1. Css: more or Less ?Julien RocheHuman Talks Grenoble – 12/03/2013
  2. 2. Speaker  Julien Roche @rochejul  Ingénieur d’étude et formateur sur Java, Web et Web Mobile pour Objet Direct  Ancien commiter du projet OpenSource “wiQuery”  Expérience Web Mobile depuis 2 ans  Auteur de formations sur HTML5 et le Web Mobile  Référent HTML5 et Web Mobile2
  3. 3. Et pour faire la présentation … … racontons une jolie histoire 33
  4. 4. Il était une fois … un site Web 44
  5. 5. Sur ce site Web … j’ai rencontré du CSS (… entre autre …) 55
  6. 6. Je suis content car … ■ Le CSS permet de définir des styles au DOM ■ Le CSS permet de définir des styles selon le média ■ Le CSS permet de l’héritage des styles ■ Le CSS possède un moteur de sélecteur CSS puissant ■ Et Le CSS a connu enormément d’amélioration depuis CSS3 66
  7. 7. Mais soudain … … le drame 77
  8. 8. On doit faire face à … … une structuration complexe … du code difficile à maintenir… du code en quantité … un manque d’outils … l’absence de méthodes utilitaires … l’absence de variables, de fonctions 88
  9. 9. Mais une lueur d’espoir … http://lesscss.org/ https://github.com/cloudhead/less.js 99
  10. 10. J’ai enfin un outil ! (1) ■ Vous devez créer des fichiers avec l’extension “.less” ■ Ensuite, Less nous offre la possiblité de l’utilisé de deux façons différentes 1010
  11. 11. J’ai enfin un outil ! (2)  Importer le fichier JavaScript “less.js” dans votre page, qui va compiler à la volée vos fichiers Less <!DOCTYPE HTML> <html lang="fr"> <head> <!-- Metas basic --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="fr"> <!-- StyleSheets --> <link rel="stylesheet/less" type="text/css" href="styles.less" /> <!-- JavaScripts --> <script src="less.js" type="text/javascript"></script> <!-- Title & others --> <title>Exemple très simple</title> </head> <body> <!-- ... --> </body> </html>11
  12. 12. J’ai enfin un outil ! (3) ■ utiliser RhinoJS / NodeJs pour compiler les fichiers Less en CSS directement !!12
  13. 13. J’ai enfin des variables ! @black: #000; @gray: rgba(85, 85, 85); @white: rgb(0, 0, 0); Less nous offre la possibilité d’utiliser des variables !! body { background-color: @gray; } Cela est d’autant plus utile pour les sites à marque blanche (et de pouvoir ainsi changer facilement et img { rapidement les couleurs, la taille des éléments …) border: 2px dotted @black; } 1313
  14. 14. J’ai enfin des méthodes !.text-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; Less permet de génèrer des portions de -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; code en fonction de paramètres (en leur plaçant des valeurs par défaut) filter: progid:DXImageTransform.Microsoft.Shadow(Strength=@blur, Direction=90, Color= @color)} Cela permet de faire du refactoring dep.shadow { code et d’avoir une maintenance accrue de .text-shadow(); nos styles}.mixin (@a) when (lightness(@a) >= 50%) { background-color: @Black;}.mixin (@a) when (lightness(@a) < 50%) { background-color: @White; Less offre également la possibilité de} mettre des conditions sur les méthodes (afin de savoir si elle s’applique ou non).mixin (@a) { color: @a;} 1414
  15. 15. Je peux facilement séparer mes fichiers ! /* Fichier a.less */ @a: red; @b: blue; @c: green; @import de CSS3 pas encore bien supporté. Du coup, avec Less, nous pouvons l’utiliser sans problèmes /* Fichier b.less */ @import-once "a.less"; table { background-color: @a; border: 1px solid @b; color: @c; } 1515
  16. 16. J’ai un code structurant ! /* CSS */ // Less table { table { border: 1px solid black; border: 1px solid @borderColor; } &.dotted { table.dotted { border-style: dotted; border-style: dotted; } } td { table td { background-color: @tdColor; background-color: #ffbbcc; &:hover{ } background-color: @tdHoverColor; table td:hover { } background-color: #ccbbff; } } } Code plus claire et structuré 1616
  17. 17. J’ai des méthodes supplémentaires ! // Commenter avec “//” !! // Variabiliser les sélecteurs @prefix: a-prefix; .@{prefix}-style { // va devenir .a-prefix-style } Et tout un tas de fonctions pratiques que je vous invite à voir directement sur le // Injection dans du texte site @baseUrl: "http://somewhere.com"; background-image: url("@{baseUrl}/a.png"); // Opérations !! @base: 5%; @filler: (@base * 2); @other: (@base + @filler); @base-color: (#888 / 4); background-color: (@base-color + #111); 1717
  18. 18. Et plein d’autres choses encore ! Documentation (officielle ou non) Outils http://lesscss.org/#docs http://css2less.cc/ http://lesscss.org/#reference http://crunchapp.net/ http://coding.smashingmagazine.com/2011/ http://winless.org/ 09/09/an-introduction-to-less-and- comparison-to-sass/ http://wearekiss.com/simpless18

×