Do more in your CSS with LESS
Human talks Genève 10/12/2013
Audrey Lièvremont
- développeuse chez AIM
- jDuchess
- @alievremont
CSS : quelques rappels
- CSS 1 : 1996
- CSS 2 : 1998
- CSS 2.1 : 2007
- CSS 3 : depuis 1999
- CSS4 : depuis 2010
Cascading Stylesheet
- Structure et présentation
- Différents media
- Cascade
CSS le mal aimé
- Structure et présentation
- Accessibilité
- Cascade
- Compatibilité navigateur
- Copier/Coller
Préprocesser son CSS ?
- DRY
- Lisibilité
- Gain de temps
Moins de CSS
Côté client
<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script>Côté serveur
- Node JS
- Rhino
Des variables
@couleur : #13BEEF;h1{color: @couleur;size: 2em;}h2{color: @couleur;size: 1.5em;}
Des mixins
.transition (@transition : color .2s ease-in-out){
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
-ms-transition: @transition;
transition: @transition;
} .transition(opacity .25s ease .1s); De l'imbrication
#titre{font-size: 2em;color: black;p {font-size: 1em;&.colore{color: blue;}}}
#titre {...}#titre p {...}#titre p.colore {...}
Plus d'imbrication
a{font-size: 1.5em;text-decoration: underline;&:hover {color: @couleur;}}
Des opérations
@bordure : 1px;.title {border-left: @bordure;border-right: @bordure * 3;}
@couleur : #13BEEF;h1{color: @couleur;}h2{color: (@couleur + #003300);}h3{color: desaturate(@color, 20%);}
De la modularité
@import('titres'); @import('titres.less');Bootstrap
De l'héritage
Avant...
.button {
background: white;
display: block;
width: 120px;
}
.blue-button {
.button();
background: blue;
}.button {
background: white;
display: block;
width: 120px;
}
.blue-button {
display: block;
width: 120px;
background: blue;
}
Après !
.button {
background: white;
display: block;
width: 120px;
}
.blue-button:extend(.button) {
background: blue;
}.button, .blue-button {
background: white;
display: block;
width: 120px;
}
.blue-button {
background: blue;
}