Download - 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