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;
}
Des questions ?
Références
deck
By Audrey Lièvremont
deck
- 1,305