introduction à less (sud web 2011)
TRANSCRIPT
![Page 1: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/1.jpg)
Rendez vos feuilles de style dynamiquesavec LESS
Corinne Schillinger
jeudi 26 mai 2011
![Page 2: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/2.jpg)
VARIABLES
h1 { color: #B90228;}
h2 { color: #3F3033;}
jeudi 26 mai 2011
![Page 3: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/3.jpg)
VARIABLES
@nom: valeur;
h1 { color: #B90228;}
h2 { color: #3F3033;}
jeudi 26 mai 2011
![Page 4: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/4.jpg)
VARIABLES
@nom: valeur;
h1 { color: #B90228;}
h2 { color: #3F3033;}
@red: #B90228;@brown: #3F3033;
jeudi 26 mai 2011
![Page 5: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/5.jpg)
VARIABLES
h1 { color: @red;}
@nom: valeur;
h1 { color: #B90228;}
h2 { color: #3F3033;}
@red: #B90228;@brown: #3F3033;
jeudi 26 mai 2011
![Page 6: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/6.jpg)
VARIABLES
h1 { color: @red;}
@nom: valeur;
h1 { color: #B90228;}
h2 { color: #3F3033;}
h2 { color: @brown;}
@red: #B90228;@brown: #3F3033;
jeudi 26 mai 2011
![Page 7: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/7.jpg)
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
![Page 8: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/8.jpg)
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
![Page 9: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/9.jpg)
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
![Page 10: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/10.jpg)
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
![Page 11: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/11.jpg)
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
![Page 12: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/12.jpg)
#sncf { border: solid 1px #3F3033; background-color: #FFF;}
HÉRITAGE
jeudi 26 mai 2011
![Page 13: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/13.jpg)
.border { border: solid 1px #3F3033;}
#sncf { border: solid 1px #3F3033; background-color: #FFF;}
HÉRITAGE
jeudi 26 mai 2011
![Page 14: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/14.jpg)
.border { border: solid 1px #3F3033;}
#sncf { border: solid 1px #3F3033; background-color: #FFF;}
HÉRITAGE
#sncf { .border; background-color: #FFF;}
jeudi 26 mai 2011
![Page 15: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/15.jpg)
.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
![Page 16: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/16.jpg)
.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
![Page 17: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/17.jpg)
.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
![Page 18: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/18.jpg)
.orateur { width: 330px;}
OPÉRATIONS
jeudi 26 mai 2011
![Page 19: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/19.jpg)
@width: 700px;@gutter: 40px;
.orateur { width: 330px;}
OPÉRATIONS
jeudi 26 mai 2011
![Page 20: Introduction à LESS (Sud Web 2011)](https://reader034.vdocuments.site/reader034/viewer/2022052601/558e335f1a28ab2b278b466d/html5/thumbnails/20.jpg)
@width: 700px;@gutter: 40px;
.orateur { width: 330px;}
OPÉRATIONS
.orateur { width: (@width - @gutter) / 2; ☛ width: (700 - 40) / 2;}
jeudi 26 mai 2011