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.
Je suis un développeur Web, et je n’ai pas peur de dire que désormais, j’aime le CSS !
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CSS++more+or+Less
1. CSS: more or Less
12h35 - 12h50 - Salle Miles David
2. CSS: more or Less
Julien Roche
Java and Web engineer / trainer
Objet Direct
@rochejul
27 au 29 mars 2013
3. Julien Roche
■ Ingénieur d’étude Java, Web, Web Mobile / hybride chez Objet
Direct depuis 5 ans
■ Formateur / consultant sur ces technologies
■ Ancien commiter officiel du projet OpenSource wiQuery
■ Des talks / articles:
■ Quickie au Devoxx 2012
■ 3 Articles sur le magazine “Programmez”
■ 2 Talks au Human Talks Grenoble
3
4. Et pour faire la présentation …
… racontons une jolie histoire
4
6. Sur ce site Web …
… j’ai rencontré du CSS (… entre autre …)
6
7. Je suis content car … (1)
■ Le CSS permet de styliser le DOM HTML
■ Le CSS permet de définir des styles selon
le média
■ Le CSS permet de l’héritage des styles
7
8. Je suis content car … (2)
■ Le CSS possède un moteur de sélecteur
CSS puissant
■ Et le CSS a connu énormément
d’améliorations grâce à CSS3
8
10. On doit faire face à…(1)
… du code en quantité
… du code difficile à maintenir … une structuration complexe
10
11. On doit faire face à…(2)
… un manque d’outils
… l’absence de variables, de fonctions … l’absence de méthodes utilitaires
11
12. Mais une lueur d’espoir …
http://lesscss.org/ https://github.com/cloudhead/less.js
12
13. J’ai enfin un outil ! (1)
■ Vous devez créer des fichiers avec l’extension “.less”
■ Ensuite, vous avez deux manières de l’utiliser
13
14. 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>
15. J’ai enfin un outil ! (3)
■ Utiliser RhinoJS / NodeJs pour compiler les fichiers Less en CSS
directement !!
16. Mais Less, c’est plus que ça !
Il « étend » CSS afin de l’enrichir:
Il offre de nouvelles syntaxes
Il offre de nouvelles fonctionnalités
Il offre des méthodes utilitaires
17. J’ai enfin des variables !
@black: #000;
@gray: rgba(85, 85, 85);
@white: rgb(255, 255, 255);
body {
background-color: @gray; Less nous offre la possibilité d’utiliser
des variables !!
}
Cela est très utile pour les sites à
img { marque blanche (pour pouvoir changer
border: 2px dotted @black;
facilement et rapidement les couleurs,
la taille des éléments …)
}
17
18. Un exemple de site à marque blanches
Thèmes Bootstrap, se basant sur Less !!!! Merci les variables
19. J’ai enfin des méthodes ! (1)
.text-shadow (@x, @y, @blur, @color) {
box-shadow: @x @y @blur @color;
-moz-box-shadow: @arguments; Less permet de génèrer des portions de code en
fonction de paramètres
-webkit-box-shadow: @arguments;
} Cela permet de faire du refactoring de code et
d’avoir une maintenance accrue de nos styles
p.shadow {
.text-shadow(0px, 0px, 1px, #00000);
}
19
20. J’ai enfin des méthodes ! (2)
.text-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @x @y @blur @color;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
p.shadow { Les paramètres d’une fonction deviennent
.text-shadow(); optionnels si ces derniers ont une valeur par
défaut
}
20
21. J’ai enfin des méthodes ! (3)
.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 elles
.mixin (@a) { s’appliquent ou non)
color: @a;
}
21
26. J’ai des méthodes supplémentaires ! (3)
escape(@string); // URL encodes a string
e(@string); // escape string content
%(@string, values...); // formats a string
ceil(@number); // rounds up to an integer
floor(@number); // rounds down to an integer
percentage(@number); // converts to a %, e.g. 0.5 -> 50%
round(number, [places: 0]); // rounds a number to a number of places
26
27. J’ai des méthodes supplémentaires ! (4)
Et bien d’autres !
Pour manipuler / extraire des informations sur les couleurs
Pour convertir / extraire des données
27