Préprocesseurs css

© Proxym-IT
Technopole de Sousse / BP 184 – 4051 Sousse, Tunisia
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://www.proxym-it.com
http://twitter.com/proxymit
Préprocesseurs
Veille technologique – Proxym-IT 2016
Préparer et animer par
Mahmoud N’bet
Maha Sghaier
Optimiser vos codes CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Plan
• Introduction
• Les problème inhérent à CSS
• Qu’est ce qu’un un préprocesseurs.
• Les fonctionnalités
• workshop

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Introduction
Vous connaissez forcement tout le CSS, ce langage
de style indispensable qui vous permet de mettre
en place le design de vos sites.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
LeCSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
LeCSS
Langage non
dynamique
duplication
de code
Pas de notion
de procédures

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
LesproblèmeinhérentàCSS
Manque du Souplesse

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Manque de lisibilité

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Redondance du code

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Travaille avec plusieurs fichiers

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
LespréprocesseursCSS
Les préprocesseurs CSS vont donc par pour
changer la notion de travailler de CSS,
mais plutôt afin d’ étendre CSS pour lui
apporter ce qu’il manque.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesfonctionnalités
• Concaténer plusieurs fichiers (performance)
• Permettre l’utilisation de variables (faciliter)
• Permettre l’utilisation de « mixins » (classes
internes )
• Ajouter des fonctions mathématiques
(dynamique)
• Ajouter des méthodes prédéfinies (structurer)
• Permettre le « Nesting » (organiser)
L’import de plusieurs fichiers ne coûte pas de ressources ! Au final, on génère
un fichier unique (qui peut être minifié) pour l’intégralité du site.

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Quelpréprocesseurchoisir?

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
TravailleravecLESS
Il y a globalement trois façons d’utiliser LESS
Coté client
CSS
Coté serveur
En ligne de commande
ou via un logiciel
LESS
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
$ npm install less
$ lessc styles.less > styles.css
Node.js PHP

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
TravailleravecSASS
Les outils de compiler SASS
CSS
coté serveur En ligne de commandeNode.js
$ gem install sass
$ sass --watch style.scss:style.css
PHP
Via un logiciel

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Logicielsdepréprocessing
• Codekit (for Mac)
• Prepros
• Simpless
• Crunchapp
• …

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Structuredeprojet(exemple)
• css
– main.min.css
– /vendor
• Bootstrap.min.css
• less (ou bien sass)
– main.less
– fonts.less
– module
• forms.less

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Importetconcaténationdefichiers
@import: global.less;
@import: colors.less;
@import: responsive.less;
Code LESS
Concaténation
Import
Une seule requête
Un seul fichiers

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
@import: ‘reset’;
body {
font-size : 12px;
background-color: #EEE;
}
Code SASS
*{
margin : 0px;
padding: 0px;
}
Code SASS
_reset.scss
main.scss
Import non
compilé
main.scss

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
@import: ‘reset’;
body {
font-size : 12px;
}
Code SASS
*{
margin : 0px;
padding: 0px;
}
Code SASS
_reset.scss
main.scss
*{
margin : 0px;
padding: 0px;
}
body {
font-size : 12px;
}
Code SASS
main.scss

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesvariables
• La déclaration d’une variable
se fait de la façon suivante:
– @nom de la variable: valeur;
– $nom de la variable: valeur;
@main-color: #DDD;
.dialog {
border: 1px solid @main-color;
}
.menu {
color: @main-color;
}
.dialog {
border: 1px solid #DDD;
}
.menu {
color: 1px solid #DDD;
}
Code LESS
Rendu CSS
$main-color : #DDD;
.dialog {
border: 1px solid $main-color;
}
.menu {
color: $main-color;
}
Code SASS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Règlesimbriqués(Lenesting)
• le « nesting » permet aux préprocesseurs
d’écrire du code CSS sans répétitions
.nav{
border: 2px solid $linkColor;
li {
font-size: 12px;
a {
width: 300px;
&:hover {
text-decoration: none
}
}
}
}
.nav{ border-color: 2px solid black; }
.nav li {
font-size: 12px;
}
.nav li a {
width: 300px;
}
.nav li a:hover {
text-decoration: none;
}
Code LESS / SASS Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Règlesimbriqués(Lenesting)
.nav{
border: 2px solid $linkColor;
&-sub {
margin-top:20px;
background-color: $bgColor;
}
li {
font-size: 12px;
a {
width: 300px;
&:hover {
text-decoration: none
}
}
}
}
.nav{ border-color: 2px solid black; }
.nav-sub {
margin-top:20px;
background-color:#EFEFEF;
}
.nav li {
font-size: 12px;
}
.nav li a {
width: 300px;
}
.nav li a:hover {
text-decoration: none;
}
Code LESS / SASS Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
http://twitter.com/proxymitLes«mixins»:L’extensionde
classes• les « mixins » ressemblent à des variables contenant des
propriétés CSS.
• Cela permet d’utiliser le même jeu de propriétés CSS
dans plusieurs classes.
.bordered {
border-top: 2px solid black;
border-bottom: 1px solid #ccc;
}
.widget-title {
color: #333;
.bordered;
}
nav.main-menu li {
color: #3C0;
.bordered;
}
.widget-title {
color: #333;
}
nav.main-menu li {
color: #3C0;
}
Code LESS Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesmixins:paramétrable
• Ils sont paramétrables
.bordered (@top-border: 2px, @border-color: #ccc){
border-top: (@top-border solid black;
border-bottom: 1px solid @border-color;
}
.widget-title {
color: #333;
.bordered(1px, black);
}
nav.main-menu li {
color: #3C0;
.bordered(2px);
}
.widget-title {
color: #333;
border-bottom: 1px solid black;
}
nav.main-menu li {
color: #3C0;
}
Code LESS
Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesmixins
@mixin bordered ($top-border: 2px, $border-color: #ccc){
border-top: ($top-border solid black;
border-bottom: 1px solid $border-color;
}
.widget-title {
color: #333;
@include bordered(1px, black);
}
nav.main-menu li {
color: #3C0;
@include bordered(2px );
}
.widget-title {
color: #333;
border-bottom: 1px solid black;
}
nav.main-menu li {
color: #3C0;
}
Code SASS
Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Extend
• L’ « extend », c’est une manière de surcharger
une classe.
.message{
color: black;
}
.success {
&extend : (.message);
border-color: green;
}
.error {
border-color: red;
}
.message, .success , .error{
color: black;
}
.success {
}
.error {
border-color: red;
}
Code LESS Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Extend
.message{
color: black;
}
.success {
}
.error {
border-color: red;
}
color: black;
}
.success {
}
.error {
border-color: red;
}
Code LESS Rendu CSS
<div class=“message success”> … </div>
<div class=“message error”> … </div>
HTML

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Extend
.message{
color: black;
}
.success {
&extend .message;
}
.error {
&extend .message;
border-color: red;
}
color: black;
}
.success {
}
.error {
border-color: red;
}
Code SASS Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Lesopérateursetlesméthodes
$base: 5%;
$filler: $base * 2;
$other: $base + $filler;
color: #888 / 4;
background-color: $base-color + #111;
height: 100% / 2 + $filler;
Code LESS
// permet d’éclaircir une couleur
lighten(@color, 10%);
// permet d’assombrir une couleur
darken(@color, 10%);
// appliquer une transparence
fadein(@color, 10%);
fadeout(@color, 10%);
Code LESS
$str: "hello";
$var: ~`"@{str}".toUpperCase() + '!'`;
Code LESSMéthodes spécifiques
Evaluation du code JavaScript
Les opérateurs SASS comme LESS vous permet d’utiliser
les opérateurs et des fonctions
mathématiques.
Abs, floor, round…
Le seul bémol, c’est que tu ne peux pas faire
des calculs qui mêlent les % et les pixels ou
autres unités avec SASS.
/ permet d’assombrir une couleur
darken(@color, 10%);
// appliquer une transparence
rgba(@color, 10%);
Code SASS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Logique
Il est possible de définir des « mixins » en appliquant des
contrôles sur les paramètres.
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
Code LESS
Et même sur les périphériques pour un CSS responsive.
.mixin (@a) when (@a > 0), (@a < 10) { ... } @media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
Code LESS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Logique
@main-color: #45DC2D;
.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
background-color: #000;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
background-color: #fff;
}
.mybox{
color: @main-color;
.set-bg-color(@main-color);
}
Code LESS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Logique
$main-color: #45DC2D;
@mixin set-bg-color ($text-color) {
@if lightness($text-color) >= 50% {
background-color: #000;
} @ else {
background-color: #fff;
}
}
.mybox{
color: $main-color;
@include set-bg-color($main-color);
}
Code SASS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Boucle
.columns (@n, @i:1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
.columns (@n, (@i+1));
}
}
.columns (4);
Code LESS
@mixin .columns ($n, $i:1) {
@for $i from 1 through $n {
.column-#{$i} {
width: ($i * 100% / $n);
}
}
.columns (4);
Code SASS
.column-1{ width: 25%; }
Rendu CSS

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
sudo gem install compass
compass create
compass watch
Permet de l’arborescence du projet
avec 2 dossiers « sass » et
« stylesheets » ainsi qu’un fichier
« config.rb »
Documentation : http://compass-style.org/reference/compass
sass –watch scss:css

© Proxym-IT
Phone : +216 73 82 12 22 / +33 4 34 08 02 48 Fax : +216 73 82 03 90
Conclusion
• Les préprocesseurs est à mon avis l’outil que
CSS manquait pour renforcer ses
développements.
• Mais la question qui se pose, pourquoi CSS n’a
pas pensé à intégrer toutes ces
fonctionnalités?

Préprocesseurs css

Recommandé

Recommandé

Contenu connexe

Similaire à Préprocesseurs css

Similaire à Préprocesseurs css (20)

Dernier

Dernier (13)

Préprocesseurs css

Notes de l'éditeur