Préprocesseurs css

Preview:

Citation preview

© 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

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

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

© 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

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

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

Le 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

Le 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

Le CSS

Langage non dynamique

duplication de code

Pas de notion de procédures

© 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

Les problème inhérent à CSS

Manque du Souplesse

© 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

Les problème inhérent à CSS

Manque de lisibilité

© 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

Les problème inhérent à CSS

Redondance du code

© 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

Les problème inhérent à CSS

Travaille avec plusieurs fichiers

© 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

Les problème inhérent à CSS

Travaille avec plusieurs fichiers

HTTP

HTTP

HTTP

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

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

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

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

Quel préprocesseur choisir ?

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

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

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

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

© 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

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

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

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/proxymitImport et concaténation de fichiers

@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

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/proxymitImport et concaténation de fichiers

@import: ‘reset’;

body { font-size : 12px; background-color: #EEE; }

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

Code SASS

_reset.scssmain.scss

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

body { font-size : 12px; background-color: #EEE; }

Code SASS

main.scss

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

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

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

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

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

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

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

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

.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

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

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

HTML

© 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/proxymitExtend

.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 SASS Rendu 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/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

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

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

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

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

.column-2{ width: 50%; }

.column-3{ width: 75%; }

.column-4{ width: 100%; }

Rendu 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

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

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

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

Merci pour votre attention

Recommended