Introduction à LESS (Sud Web 2011)

Rendez vos feuilles de style dynamiquesavec LESS

Corinne Schillinger

jeudi 26 mai 2011

VARIABLES

h1 { color: #B90228;}

h2 { color: #3F3033;}

jeudi 26 mai 2011

VARIABLES

@nom: valeur;

h1 { color: #B90228;}

h2 { color: #3F3033;}

jeudi 26 mai 2011

VARIABLES

@nom: valeur;

h1 { color: #B90228;}

h2 { color: #3F3033;}

@red: #B90228;@brown: #3F3033;

jeudi 26 mai 2011

VARIABLES

h1 { color: @red;}

@nom: valeur;

h1 { color: #B90228;}

h2 { color: #3F3033;}

@red: #B90228;@brown: #3F3033;

jeudi 26 mai 2011

VARIABLES

h1 { color: @red;}

@nom: valeur;

h1 { color: #B90228;}

h2 { color: #3F3033;}

h2 { color: @brown;}

@red: #B90228;@brown: #3F3033;

jeudi 26 mai 2011

DÉCLARATIONS IMBRIQUÉES

#mainNav li { float: left }

#mainNav a { display: block; padding: 6px 13px; text-decoration: none;}

#mainNav a:active, #mainNav a:visited { color: #FFF }

#mainNav a:focus, #mainNav a:hover { color: #3F3033; background-color: #FFF;}

jeudi 26 mai 2011

DÉCLARATIONS IMBRIQUÉES

#mainNav {

}

#mainNav li { float: left }

#mainNav a { display: block; padding: 6px 13px; text-decoration: none;}

#mainNav a:active, #mainNav a:visited { color: #FFF }

#mainNav a:focus, #mainNav a:hover { color: #3F3033; background-color: #FFF;}

jeudi 26 mai 2011

DÉCLARATIONS IMBRIQUÉES

#mainNav {

}

#mainNav li { float: left }

#mainNav a { display: block; padding: 6px 13px; text-decoration: none;}

#mainNav a:active, #mainNav a:visited { color: #FFF }

#mainNav a:focus, #mainNav a:hover { color: #3F3033; background-color: #FFF;}

li { float: left }

jeudi 26 mai 2011

DÉCLARATIONS IMBRIQUÉES

#mainNav {

}

#mainNav li { float: left }

#mainNav a { display: block; padding: 6px 13px; text-decoration: none;}

#mainNav a:active, #mainNav a:visited { color: #FFF }

#mainNav a:focus, #mainNav a:hover { color: #3F3033; background-color: #FFF;}

li { float: left }

a { display: block; padding: 6px 13px;

}

jeudi 26 mai 2011

DÉCLARATIONS IMBRIQUÉES

#mainNav {

}

#mainNav li { float: left }

#mainNav a { display: block; padding: 6px 13px; text-decoration: none;}

#mainNav a:active, #mainNav a:visited { color: #FFF }

#mainNav a:focus, #mainNav a:hover { color: #3F3033; background-color: #FFF;}

li { float: left }

a { display: block; padding: 6px 13px;

}

&:active, &:visited { color: #FFF }

&:focus, &:hover { color: #3F3033; background-color: #FFF; }

jeudi 26 mai 2011

#sncf {    border: solid 1px #3F3033;    background-color: #FFF;}

HÉRITAGE

jeudi 26 mai 2011

.border { border: solid 1px #3F3033;}

#sncf {    border: solid 1px #3F3033;    background-color: #FFF;}

HÉRITAGE

jeudi 26 mai 2011

.border { border: solid 1px #3F3033;}

#sncf {    border: solid 1px #3F3033;    background-color: #FFF;}

HÉRITAGE

#sncf { .border;  background-color: #FFF;}

jeudi 26 mai 2011

.border(@color: #3F3033) { border: solid 1px @color;}

#sncf {    border: solid 1px #3F3033;    background-color: #FFF;}

.geocrazy { margin-top: 10px; border: solid 1px #B90228;}

HÉRITAGE

jeudi 26 mai 2011

.border(@color: #3F3033) { border: solid 1px @color;}

#sncf {    border: solid 1px #3F3033;    background-color: #FFF;}

.geocrazy { margin-top: 10px; border: solid 1px #B90228;}

HÉRITAGE

#sncf { .border;  background-color: #FFF;}

jeudi 26 mai 2011

.border(@color: #3F3033) { border: solid 1px @color;}

#sncf {    border: solid 1px #3F3033;    background-color: #FFF;}

.geocrazy { margin-top: 10px; border: solid 1px #B90228;}

HÉRITAGE

#sncf { .border;  background-color: #FFF;}

.geocrazy { margin-top: 10px; .border(@red);}

jeudi 26 mai 2011

.orateur { width: 330px;}

OPÉRATIONS

jeudi 26 mai 2011

@width: 700px;@gutter: 40px;

.orateur { width: 330px;}

OPÉRATIONS

jeudi 26 mai 2011

@width: 700px;@gutter: 40px;

.orateur { width: 330px;}

OPÉRATIONS

.orateur { width: (@width - @gutter) / 2; ☛ width: (700 - 40) / 2;}

jeudi 26 mai 2011