LESS, Le CSS avancé
- 1. © Proxym-IT
http://twitter.com/proxymit
CSS : avancé
Département Web2.0 Veille technologique
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
- 2. © Proxym-IT
Introduction
http://twitter.com/proxymit
Coins
arrondis
effets
textuels
ombres
multi-
colonage
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
- 3. © Proxym-IT
Introduction
http://twitter.com/proxymit
Coins
arrondis Langage non
dynamique
effets
textuels
Pas de
notion de
variables
ombres
Pas de notion
multi- de procédures
colonage
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
- 4. © Proxym-IT
Introduction
http://twitter.com/proxymit
Avec CSS:
• On ne peut pas réutiliser une partie d’un style
pour l’appliquer à un autre.
• On ne peut pas paramétrer des styles
semblables.
• On ne peut pas déclarer des constantes et les
réutiliser.
• On ne peut pas faire d’opérations
simples sur des tailles, des fonts
et des couleurs…
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
- 5. © Proxym-IT
Introduction au LESS
http://twitter.com/proxymit
Pas tout-à-fait, car ce problème commun à
tous les intégrateur et les développeurs
pourrait avoir une solution avec LessCSS !
LESS nous propose un langage de présentation
qui étend CSS pour lui apporter ce qu’il
manque.
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
- 6. © Proxym-IT
Avantages de l’utilisation de LESS
http://twitter.com/proxymit
Règles
imbriqués
Importations
Commentaires
Augmenter la lisibilité et
l'organisation des CSS en Diminuer la
utilisant quantité du code
CSS à l’aide
Les variables
Les mixins Gestion des
couleurs
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
- 7. © Proxym-IT
Travailler avec LESS
http://twitter.com/proxymit
Il y a globalement trois façons d’utiliser LESS
LESS
En ligne de
Directement dans commande
CSS
un navigateur $ lessc styles.less > styles.css
Sur le serveur node.js
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
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
- 8. © Proxym-IT
Les variables
http://twitter.com/proxymit
• La déclaration d’une variable se fait de la façon
suivante: @nom de la variable: valeur
• Ensuite, on peut les réutiliser dans les propriétés CSS
de nos déclarations
Code LESS Rendu CSS
@borderColor: #DDD; .dialog {
@txtColor: #ABC; border: 1px solid #DDD;
.dialog { color: #ABC;
border: 1px solid @borderColor; }
color: @txtColor; .menu {
} border-bottom: 1px solid #DDD;
.menu { color: #ABC;
border-bottom: 1px solid }
@borderColor;
color: .dialog[‘color’];
}
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
- 9. © Proxym-IT
Les mixins
http://twitter.com/proxymit
• 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.
Code LESS Rendu CSS
.bordered { .widget-title {
border-top: 2px solid black; color: #333;
border-bottom: 1px solid #ccc; border-top: 2px solid black;
} border-bottom: 1px solid #ccc;
.widget-title { }
color: #333; nav.main-menu li {
.bordered; color: #3C0;
} border-top: 2px solid black;
nav.main-menu li { border-bottom: 1px solid #ccc;
color: #3C0; }
.bordered;
}
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
- 10. © Proxym-IT
Les mixins : paramétrable
http://twitter.com/proxymit
• Ils sont paramétrables
Code LESS Rendu CSS
.bordered (@btop: 2px, @bcolor: #ccc){ .widget-title {
border-top: @btop solid black; color: #333;
border-bottom: 1px solid @bcolor; border-top: 1px solid black;
} border-bottom: 1px solid black;
.widget-title { }
color: #333; nav.main-menu li {
.bordered(1px, black); color: #3C0;
} border-top: 2px solid black;
nav.main-menu li { border-bottom: 1px solid #CCC;
color: #3C0; }
.bordered(2px , #CCC);
}
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
- 11. Les mixins : les définitions © Proxym-IT
http://twitter.com/proxymit
conditionnelles
• Appliquer des contrôles sur les paramètres.
Code LESS
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
• Et même sur les périphériques pour un CSS responsive.
Code LESS
.mixin (@a) when (@a > 10), (@a < -10) { ... } @media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
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
- 12. © Proxym-IT
Règles imbriqués
http://twitter.com/proxymit
• Avec les règles imbriqués, LESS permet d’écrire du code
CSS sans répétitions
Code LESS Rendu CSS
#header { #header { color: black; }
color: black; #header .navigation {
.navigation { font-size: 12px;
font-size: 12px; }
} #header .logo {
.logo { width: 300px;
width: 300px; }
&:hover { #header .logo:hover {
text-decoration: none text-decoration: none;
} }
}
}
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
- 13. © Proxym-IT
Autres fonctionnalités
http://twitter.com/proxymit
Les opérateurs
Code LESS
@baseColor : #444;
@base: 5%;
@filler: @base * 2; Evaluation du code JavaScript
@other: @base + @filler;
color: #888 / 4; Code LESS
background-color: @baseColor + #111; @str: "hello";
height: 100% / 2 + @filler; @var: ~`"@{str}".toUpperCase() + '!'`;
Gestion des couleurs
Code LESS
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
…
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
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
- 14. © Proxym-IT
Conclusion
http://twitter.com/proxymit
• LESS est à mon avis l’outil que CSS manquait
pour renforcer ses développements.
• LESS ne remplace pas CSS. C’est un méta-
langage qui permet de générer du code CSS.
• Mais la question qui se pose, pourquoi CSS n’a
pas pensé à intégrer toutes
ces fonctionnalités?
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
- 15. © Proxym-IT
http://twitter.com/proxymit
Merci pour votre
attention
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