Slide 1
Slide 1 text
Gagnez en productivité avec
les préprocesseurs CSS
Pierre-Emmanuel Fringant
http://www.formation-cakephp.com
@pefringant
Slide 2
Slide 2 text
Préprocesseur CSS ?
● Tourne en tâche de fond
● Analyse des scripts en métalangage
● Affiche les éventuelles erreurs
● Produit un fichier CSS
● Plusieurs environnements possibles
Slide 3
Slide 3 text
Métalangages
Sass
Scss
Less Stylus
Slide 4
Slide 4 text
Organisation, imports
● Fractionnement libre des fichiers
● Composants réutilisables
● Import :
● Un seul fichier CSS au final
scss/
partials/
_forms.scss
_pagination.scss
@import "partials/forms";
@import "partials/pagination";
Slide 5
Slide 5 text
Imbrication
Attention aux sélecteurs trop longs :
.gallery {
ul {
li {
line-height: 70px;
margin-right: 20px;
a {
display: block;
img {
...
.gallery ul li a img {...
SCSS
CSS
Slide 6
Slide 6 text
Variables
$mainColor: #0088CC;
h1 {
color: $mainColor;
}
SCSS
Slide 7
Slide 7 text
Variables
$mainColor: #0088CC;
h1 {
color: $mainColor;
}
h2 {
color: lighten($mainColor, 15%);
}
SCSS
Slide 8
Slide 8 text
Variables
$mainColor: #0088CC;
h1 {
color: $mainColor;
}
h2 {
color: lighten($mainColor, 15%);
}
h2 {
color: #1AB2FF;
}
SCSS
CSS
Slide 9
Slide 9 text
Variables et opérations
$siteWidth: 960px;
$contentWidth: 500px;
$sidebarWidth: 220px;
#wrapper {
width: $siteWidth;
}
#content {
width: $contentWidth;
}
#sidebar {
width: $sidebarWidth;
}
#extra {
width: $siteWidth - $contentWidth - $sidebarWidth;
}
SCSS
Slide 10
Slide 10 text
Référence au sélecteur parent
#report td {
font-size: 14px;
&:first-child {
width: 100%;
}
&:not(first-child) {
white-space: nowrap;
}
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
}
SCSS
Slide 11
Slide 11 text
Référence au sélecteur parent
#report td {
font-size: 14px;
}
#report td:first-child {
width: 100%;
}
#report td:not(first-child) {
white-space: nowrap;
}
#report td a { color: blue; }
#report td a:hover { text-decoration: underline; }
CSS
Slide 12
Slide 12 text
Mixins
@mixin border-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box {
border: 1px solid invert($mainColor);
@include border-radius;
}
SCSS
Slide 13
Slide 13 text
Mixins
.box {
border: 1px solid #ff7733;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
CSS
Slide 14
Slide 14 text
Mixins Avec paramètre(s)
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.big-box {
@include border-radius(16px);
}
SCSS
Slide 15
Slide 15 text
Mixins Paramètre par défaut
@mixin border-radius($radius: 10px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.standard-box {
@include border-radius();
}
SCSS
Slide 16
Slide 16 text
Héritage
%alert {
font: {
size: 2em;
weight: bold;
}
}
.notice {
@extend %alert;
color: orange;
}
.error {
@extend %alert;
color: red;
}
SCSS
Slide 17
Slide 17 text
Héritage
.notice, .error {
font-size: 2em;
font-weight: bold;
}
.notice {
color: orange;
}
.error {
color: red;
}
CSS
Slide 18
Slide 18 text
Media queries
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
SCSS
Slide 19
Slide 19 text
Media queries
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
...
.sidebar {
width: 300px;
}
CSS
Slide 20
Slide 20 text
Mixins :
● Reset
● CSS3
● Maintenance des sprites
● Typographie (rythme vertical)
● ...
Communauté nombreuse et active :
● Plugins
Slide 21
Slide 21 text
Compass : sprites
images/
actions/
new.png
edit.png
save.png
delete.png
@import "actions/*.png";
@include all-actions-sprites;
SCSS
Slide 22
Slide 22 text
Compass : sprites
.actions-sprite,
.actions-delete,
.actions-edit,
.actions-new,
.actions-save {
background: url('/images/actions-s34fe0604ab.png') no-
repeat; }
.actions-delete { background-position: 0 0; }
.actions-edit { background-position: 0 -32px; }
.actions-new { background-position: 0 -64px; }
.actions-save { background-position: 0 -96px; }
CSS
Slide 23
Slide 23 text
Susy
● Grille pour Compass
● Responsive
Slide 24
Slide 24 text
Twitter Bootstrap
● Feuille de style complète fournie
● Fichiers sources en .less
● Maintenu par Twitter et la communauté
● Traduit en sass/scss
Slide 25
Slide 25 text
Des questions ?
[email protected]
http://www.formation-cakephp.com
@pefringant