LESS, moins de CSS

plus de fun !

Corinne Schillinger

@schillinger - www.inseo.fr

Corinne Schillinger

LESS = CSS + 4 fonctionnalités majeures

KeSAKO

variables

héritage

règles imbriquées

opérations

fichier.less

compilateur

fichier.css

Comment Ca Marche

LES Compilateurs

JS : version officielle - http://lesscss.org/

PHP : lessphp - http://leafo.net/lessphp/

Mac : less.app - http://incident57.com/less/

.Net : dotlesscss - http://www.dotlesscss.org/

WordPress : wp-less - https://wordpress.org/extend/plugins/wp-less/

Symfony : sgLESSPlugin - http://www.symfony-project.org/plugins/sgLESSPlugin

Ruby : less - http://rubygems.org/gems/less

Rails : more - https://github.com/cloudhead/more

Mon 1er fichier less

Un fichier .css est un fichier .less valide

Modifiez : styles.css en styles.less

Et vous avez un fichier .less

\o/

LES VARIABLES

@color: #7f7f7f;

@path: MonTheme;

@margin : 15px 0;

//code css.MonTheme { margin: 15px 0; color: #404040; background: #c9c9c9 url("../img/MonTheme/h2.jpg") 0 0 repeat-x;}

//code less@color: #404040;@bg-color: #c9c9c9;@path: MonTheme;@margin : 15px 0;

.MonTheme { margin: @margin; color: @color; background: @bg-color url("../img/@path/h2.jpg") 0 0 repeat-x;}

LES declarations imbriquees

//code less

ul#main-nav {

li {

a {}

}

}

//code css

ul#main-nav {}

ul#main-nav li {}

ul#main-nav li a {}

//code lessul#main-nav { margin: 20px 0 0 20px; list-style: none; li { padding: 3px 0;

a { text-decoration: none } }}

//code cssul#main-nav { margin: 20px 0 0 20px; list-style: none;}ul#main-nav li { padding: 3px 0 }ul#main-nav li a { text-decoration: none }

//code lessul#main-nav { li { padding: 3px 0 } a { text-decoration: none }}

//code lessul#main-nav { li { padding: 3px 0; a { text-decoration: none } }}

/!\

trop d’imbrication = surcharge inutile

//code css#main-nav a:link, #main-nav a:visited { color: #7f7f7f }#main-nav a.active, #main-nav a:focus, #main-nav a:hover, #main-nav a:active { color: #00bc96;}

‘‘&’’ permet la concaténation à l’élément parent

//code less@grey: #7f7f7f;@turquoise: #00bc96;#main-nav a { &:link, &:visited { color: @grey } &.active, &:focus, &:hover, &:active { color: @turquoise }}

L’heritage//code less

.border-radius {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.box { .border-radius }

//code css

.box {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

//code css.box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.circle { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}

//code less.border-radius(@radius: 5px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}.box { .border-radius }.circle { .border-radius(30px) }

.border-radius(@tr: 5px, @br: 5px, @bl: 5px, @tl: 5px){ -webkit-border-top-right-radius: @tr; -webkit-border-bottom-right-radius: @br; -webkit-border-bottom-left-radius: @bl; -webkit-border-top-left-radius: @tl; -moz-border-top-right-radius: @tr; -moz-border-bottom-right-radius: @br; -moz-border-bottom-left-radius: @bl; -moz-border-top-left-radius: @tl; border-top-right-radius: @tr; border-bottom-right-radius: @br; border-bottom-left-radius: @bl; border-top-left-radius: @tl;}.box { .border-radius }.semi-circle { .border-radius(30px, 0, 0, 30px) }

//code css...

Les operations//code less

@margin: 30px;

@color: #404040;

h2 {

margin: @margin 0 @margin/2;

color: @color + #404040;

}//code css

h2 {

margin: 30px 0 15px;

color: #808080;

}

//code css.n2 { margin-left: 20px; color: #808080;}.n3 { margin-left: 30px; color: #c0c0c0;}

//code less@margin-left: 10px;@color: #404040;

.n2 { margin-left: @margin-left*2; color: @color*2;}.n3 { margin-left: @margin-left*3; color: @color*3;}

La Methode daisy

Scinder la feuille de style en plusieurs fichiers :

reset.css - typo.css - grid.css - pages.css

Gain de lisibilité, maintenance facilitée

Concaténer en un seul fichier pour la mise en production

http://romy.tetue.net/methode-daisy

- Romy Duhem-Verdière -

Appliquee A lessvariables.less - reset.less - typo.less

grid.less - pages.less

@import

styles.less

compilateur

styles.css

Pour aller plus loin

LESS Elements

http://lesselements.com

ensemble de class .less

prêtes à l’emploi

.border-radius, .box-shadow, .opacity, ...

Merci pour votre attention

Corinne Schillinger

@schillinger - www.inseo.fr