Préprocesseurs css

© Proxym-IT

Technopole de Sousse / BP 184 – 4051 Sousse, TunisiaPhone : +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 parMahmoud N’bet

Maha Sghaier

Optimiser vos codes CSS

© Proxym-IT




Plan• Introduction• Les problème inhérent à CSS• Qu’est ce qu’un un préprocesseurs.• Les fonctionnalités• workshop

© Proxym-IT




IntroductionVous connaissez forcement tout le CSS, ce langage de style indispensable qui vous permet de mettre

en place le design de vos sites.

© Proxym-IT




Le CSS

© Proxym-IT




Le CSS

© Proxym-IT




Le CSS

Langage non dynamique

duplication de code

Pas de notion de procédures

© Proxym-IT




Les problème inhérent à CSS

Manque du Souplesse

© Proxym-IT





Manque de lisibilité

© Proxym-IT





Redondance du code

© Proxym-IT





Travaille avec plusieurs fichiers

© Proxym-IT





Travaille avec plusieurs fichiers

HTTP

HTTP

HTTP

© Proxym-IT



http://twitter.com/proxymitLes préprocesseurs CSS

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




Les fonctionnalité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




Quel préprocesseur choisir ?

© Proxym-IT



http://twitter.com/proxymitTravailler avec LESSIl y a globalement trois façons d’utiliser LESS

Coté clientCSS

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



http://twitter.com/proxymitTravailler avec SASSLes outils de compiler SASS

CSS

coté serveur En ligne de commande Node.js

$ gem install sass$ sass --watch style.scss:style.css

PHP

Via un logiciel

© Proxym-IT




Logiciels de préprocessing• Codekit (for Mac)• Prepros• Simpless• Crunchapp• …

© Proxym-IT




Structure de projet (exemple)• css– main.min.css– /vendor

• Bootstrap.min.css

• less (ou bien sass)– main.less– fonts.less– module

• forms.less

© Proxym-IT



http://twitter.com/proxymitImport et concaténation de fichiers

@import: global.less;@import: colors.less;@import: responsive.less;

Code LESS

Concaténation

Import

Une seule requête

Un seul fichiers

© Proxym-IT




@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




@import: ‘reset’;


Code SASS*{ margin : 0px; padding: 0px; }

Code SASS

_reset.scssmain.scss

*{ margin : 0px; padding: 0px; }


Code SASS

main.scss

© Proxym-IT



http://twitter.com/proxymitLes variables• 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



http://twitter.com/proxymitRègles imbriqués (Le nesting)• 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



http://twitter.com/proxymitRègles imbriqués (Le nesting).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



http://twitter.com/proxymitLes « mixins » : L’extension de 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; border-top: 2px solid black; border-bottom: 1px solid #ccc;}nav.main-menu li { color: #3C0; border-top: 2px solid black; border-bottom: 1px solid #ccc;}

Code LESS Rendu CSS

© Proxym-IT



http://twitter.com/proxymitLes mixins : 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-top: 1px solid black; border-bottom: 1px solid black;}nav.main-menu li { color: #3C0; border-top: 2px solid black; border-bottom: 1px solid #ccc;}

Code LESS

Rendu CSS

© Proxym-IT



http://twitter.com/proxymitLes mixins@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-top: 1px solid black; border-bottom: 1px solid black;}nav.main-menu li { color: #3C0; border-top: 2px solid black; border-bottom: 1px solid #ccc;}

Code SASS

Rendu CSS

© Proxym-IT



http://twitter.com/proxymitExtend• L’ « extend », c’est une manière de surcharger

une classe.

.message{ color: black; border-bottom: 1px solid #ccc;}.success { &extend : (.message); border-color: green;}.error { &extend : (.message); border-color: red;}

.message, .success , .error{ color: black; border-bottom: 1px solid #ccc;}.success { border-color: green;}.error { border-color: red;}

Code LESS Rendu CSS

© Proxym-IT



http://twitter.com/proxymitExtend

.message{ color: black; border-bottom: 1px solid #ccc;}.success { &extend : (.message); border-color: green;}.error { &extend : (.message); border-color: red;}


Code LESS Rendu CSS

<div class=“message success”> … </div>

<div class=“message error”> … </div>

HTML

© Proxym-IT



http://twitter.com/proxymitExtend

.message{ color: black; border-bottom: 1px solid #ccc;}.success { &extend .message; border-color: green;}.error { &extend .message; border-color: red;}


Code SASS Rendu CSS

© Proxym-IT



http://twitter.com/proxymitLes opérateurs et les mé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 couleurlighten(@color, 10%); // permet d’assombrir une couleurdarken(@color, 10%); // appliquer une transparencefadein(@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 couleurdarken(@color, 10%);

// appliquer une transparencergba(@color, 10%);

Code SASS

© Proxym-IT



http://twitter.com/proxymitLogiqueIl 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



http://twitter.com/proxymitLogique

@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



http://twitter.com/proxymitLogique

$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



http://twitter.com/proxymitBoucle.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




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

http://compass-style.org/reference/compass

http://compass-style.org/reference/compass

© Proxym-IT



http://twitter.com/proxymitConclusion

• 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?

© Proxym-IT




Merci pour votre attention

Education

Préprocesseurs css