Css.more.or.less

Css: more or Less ?

Julien Roche
Human Talks Grenoble – 12/03/2013

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 Mobile

2

Et pour faire la présentation …

… racontons une jolie histoire

3
3

Il était une fois

… un site Web
4
4

Sur ce site Web

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

5
5

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
6
6

Mais soudain …

… le drame
7
7

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

Mais une lueur d’espoir …

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

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

10
10

 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>

11


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

13
13

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 de
p.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;
}

14
14

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

15
15

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é

16
16

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

17
17

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

18

Css.more.or.less

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (7)

En vedette

En vedette (20)

Similaire à Css.more.or.less

Similaire à Css.more.or.less (20)

Plus de VISEO

Plus de VISEO (8)

Css.more.or.less