Préprocesseurs css
-
Upload
mahmoud-nbet -
Category
Education
-
view
96 -
download
0
Transcript of Préprocesseurs css
![Page 1: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/1.jpg)
© 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
![Page 2: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/2.jpg)
© 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
![Page 3: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/3.jpg)
© 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.
![Page 4: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/4.jpg)
© 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
![Page 5: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/5.jpg)
© 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
![Page 6: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/6.jpg)
© 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
![Page 7: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/7.jpg)
© 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
![Page 8: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/8.jpg)
© 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é
![Page 9: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/9.jpg)
© 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
![Page 10: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/10.jpg)
© 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
![Page 11: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/11.jpg)
© 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
![Page 12: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/12.jpg)
© 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.
![Page 13: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/13.jpg)
© 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.
![Page 14: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/14.jpg)
© 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 ?
![Page 15: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/15.jpg)
© 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
![Page 16: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/16.jpg)
© 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
![Page 17: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/17.jpg)
© 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• …
![Page 18: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/18.jpg)
© 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
![Page 19: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/19.jpg)
© 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
![Page 20: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/20.jpg)
© 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
![Page 21: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/21.jpg)
© 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
![Page 22: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/22.jpg)
© 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
![Page 23: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/23.jpg)
© 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
![Page 24: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/24.jpg)
© 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
![Page 25: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/25.jpg)
© 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
![Page 26: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/26.jpg)
© 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
![Page 27: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/27.jpg)
© 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
![Page 28: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/28.jpg)
© 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
![Page 29: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/29.jpg)
© 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
![Page 30: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/30.jpg)
© 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
![Page 31: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/31.jpg)
© 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
![Page 32: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/32.jpg)
© 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
![Page 33: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/33.jpg)
© 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
![Page 34: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/34.jpg)
© 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
![Page 35: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/35.jpg)
© 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
![Page 36: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/36.jpg)
© 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
![Page 37: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/37.jpg)
© 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?
![Page 38: Préprocesseurs css](https://reader035.fdocument.pub/reader035/viewer/2022062821/589bc5d91a28ab082b8b61d5/html5/thumbnails/38.jpg)
© 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