Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CSS++more+or+Less

CSS: more or Less
12h35 - 12h50 - Salle Miles David

CSS: more or Less

Julien Roche
Java and Web engineer / trainer
Objet Direct

@rochejul
27 au 29 mars 2013

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

Et pour faire la présentation …

… racontons une jolie histoire
4

Il était une fois …

… un site Web
5

Sur ce site Web …

… j’ai rencontré du CSS (… entre autre …)
6

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

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

Mais soudain …

… le drame
9

On doit faire face à…(1)

… du code en quantité

… du code difficile à maintenir … une structuration complexe
10

On doit faire face à…(2)

… un manque d’outils

… l’absence de variables, de fonctions … l’absence de méthodes utilitaires
11

Mais une lueur d’espoir …

http://lesscss.org/ https://github.com/cloudhead/less.js
12

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

 Importer le fichier JavaScript “less.js” dans votre page, qui va compiler
à la volée vos fichiers Less
<!DOCTYPE HTML>
<html lang="fr">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="fr">


<link rel="stylesheet/less" type="text/css" href="styles.less" />


<script src="less.js" type="text/javascript"></script>


<title>Exemple très simple</title>
</head>

<body>

</body>
</html>

■ Utiliser RhinoJS / NodeJs pour compiler les fichiers Less en CSS
directement !!

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

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

Un exemple de site à marque blanches

Thèmes Bootstrap, se basant sur Less !!!! Merci les variables

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

.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

.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

Je peux facilement séparer mes fichiers !
/* Fichier a.less */ /* Fichier b.less */
@a: red; @import-once "a.less";
@b: blue;
@c: green; table {
background-color: @a;
border: 1px solid @b;
color: @c;
}

22

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

23

J’ai des méthodes supplémentaires ! (1)
// Commenter avec “//” !!

// Variabiliser les sélecteurs
@prefix: a-prefix;
.style-@{prefix} {
// va devenir .style-a-prefix
}

// Evaluer du JavaScript (à utiliser avec précaution !!)
@var: `"hello".toUpperCase() + '!'`;

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

24

// Injection dans du texte
@baseUrl: "http://somewhere.com";
background-image: url("@{baseUrl}/a.png");

// Opérations !!
@base: 5%;
@filler: (@base * 2); // 10%
@other: (@base + @filler); // 15%
@base-color: (#888 / 4); // #222
background-color: (@base-color + #111); // #333

25

 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

 Et bien d’autres !
 Pour manipuler / extraire des informations sur les couleurs
 Pour convertir / extraire des données

27

Liens utiles
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/simpless

Les solutions concurrentes

http://css-tricks.com/poll-results-popularity-of-css-preprocessors/
30

Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CSS++more+or+Less

Contenu connexe

Tendances

En vedette

Similaire à Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CSS++more+or+Less

Plus de VISEO

Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CSS++more+or+Less