SlideShare une entreprise Scribd logo
Gagnez en productivité avec
les préprocesseurs CSS
Pierre-Emmanuel Fringant
http://www.formation-cakephp.com
@pefringant
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
Métalangages




  Sass     Less   Stylus
  Scss
Organisation, imports
● Fractionnement libre des fichiers
● Composants réutilisables
● Import :
sass/
        partials/
             _forms.scss
             _pagination.scss


@import "partials/forms";
@import "partials/pagination";


● Un seul fichier CSS au final
Imbrication
 .gallery {
     ul {
         li {
             line-height: 70px;
             margin-right: 20px;
             a {
                 display: block;
                 img {
                     ...

Attention aux sélecteurs trop longs :

 .gallery ul li a img {...
Variables
$mainColor: #0088CC;

h1 {
    color: $mainColor;
}
Variables
$mainColor: #0088CC;

h1 {
    color: $mainColor;
}

h2 {
    color: lighten($mainColor, 15%);
}
Variables
$mainColor: #0088CC;

h1 {
    color: $mainColor;
}

h2 {
    color: lighten($mainColor, 15%);
}



h2 {
    color: #1AB2FF;
}
Variables et opérations
$siteWidth: 960px;
$contentWidth: 500px;
$sidebarWidth: 220px;

#wrapper {
    width:   $siteWidth;
}
#content {
    width:   $contentWidth;
}
#sidebar {
    width:   $sidebarWidth;
}
#extra {
    width:   $siteWidth - $contentWidth - $sidebarWidth;
}
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;
          }
    }
}
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;   }
Mixins
@mixin border-radius {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.box {
    border: 1px solid invert($mainColor);
    @include border-radius;
}
Mixins
.box {
    border: 1px solid #ff7733;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
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);
}
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();
}
Héritage
%alert {
    font: {
        size: 2em;
        weight: bold;
    }
}

.notice {
    @extend %alert;
    color: orange;
}

.error {
    @extend %alert;
    color: red;
}
Héritage
.notice, .error {
    font-size: 2em;
    font-weight: bold;
}

.notice {
    color: orange;
}

.error {
    color: red;
}
Media queries
.sidebar {
    width: 300px;
    @media screen and (orientation: landscape) {
        width: 500px;
    }
}
Media queries
@media screen and (orientation: landscape) {
    .sidebar {
           width: 500px;
    }
}

...

.sidebar {
    width: 300px;
}
Mixins :
● Reset
● CSS3
● Maintenance des sprites
● Typographie (rythme vertical)
● ...
Communauté nombreuse et active :
● Plugins
Compass : sprites
images/
    actions/
        new.png
        edit.png
        save.png
        delete.png

@import "actions/*.png";
@include all-actions-sprites;
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; }
Susy
● Grille pour Compass
● Responsive
Twitter Bootstrap
●   Feuille de style complète fournie
●   Fichiers sources en .less
●   Maintenu par Twitter et la communauté
●   Traduit en sass/scss
Des questions ?
pierre.fringant@gmail.com
http://www.formation-cakephp.com
@pefringant

Contenu connexe

En vedette

Body parts
Body partsBody parts
Body parts
AFC_73
 
Driving ambition
Driving ambitionDriving ambition
Driving ambition
AFC_73
 
Malù web 2012 high
Malù web 2012 highMalù web 2012 high
Malù web 2012 high
Andrea Malú
 
Manual de suturas. ethicon
Manual de suturas. ethiconManual de suturas. ethicon
Manual de suturas. ethicon
Gabriela R. Medina
 
Smart boards and esl classrooms
Smart boards and esl classroomsSmart boards and esl classrooms
Smart boards and esl classrooms
lutherr0579
 
7 Days Express Delivery - Diwali Gifts for Clients and Employees
7 Days Express Delivery - Diwali Gifts for Clients and Employees7 Days Express Delivery - Diwali Gifts for Clients and Employees
7 Days Express Delivery - Diwali Gifts for Clients and Employees
BrandSTIK - Be Visible
 
Diwali 2016 Catalogue - Best Sellers by BrandSTIK
Diwali 2016 Catalogue - Best Sellers by BrandSTIK Diwali 2016 Catalogue - Best Sellers by BrandSTIK
Diwali 2016 Catalogue - Best Sellers by BrandSTIK
BrandSTIK - Be Visible
 
10 ways to become better person
10 ways to become better person10 ways to become better person
10 ways to become better person
Mary Grace Narvaez
 
ME GUSTA
ME GUSTAME GUSTA
ME GUSTA
AFC_73
 

En vedette (9)

Body parts
Body partsBody parts
Body parts
 
Driving ambition
Driving ambitionDriving ambition
Driving ambition
 
Malù web 2012 high
Malù web 2012 highMalù web 2012 high
Malù web 2012 high
 
Manual de suturas. ethicon
Manual de suturas. ethiconManual de suturas. ethicon
Manual de suturas. ethicon
 
Smart boards and esl classrooms
Smart boards and esl classroomsSmart boards and esl classrooms
Smart boards and esl classrooms
 
7 Days Express Delivery - Diwali Gifts for Clients and Employees
7 Days Express Delivery - Diwali Gifts for Clients and Employees7 Days Express Delivery - Diwali Gifts for Clients and Employees
7 Days Express Delivery - Diwali Gifts for Clients and Employees
 
Diwali 2016 Catalogue - Best Sellers by BrandSTIK
Diwali 2016 Catalogue - Best Sellers by BrandSTIK Diwali 2016 Catalogue - Best Sellers by BrandSTIK
Diwali 2016 Catalogue - Best Sellers by BrandSTIK
 
10 ways to become better person
10 ways to become better person10 ways to become better person
10 ways to become better person
 
ME GUSTA
ME GUSTAME GUSTA
ME GUSTA
 

Similaire à Gagnez en productivité grâce aux préprocesseurs css

CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
Kaelig Deloumeau-Prigent
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Mehdi Kabab
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
Kaelig Deloumeau-Prigent
 
Sass presentation
Sass presentationSass presentation
Sass presentation
Samah Filali
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Microsoft
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
Kaelig Deloumeau-Prigent
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Raphaël Goetter
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
davrous
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
Horacio Gonzalez
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
Jonathan Levaillant
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
Horacio Gonzalez
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
Rémi Prévost
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Conception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du webConception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du web
SOAT
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
VISEO
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
Yannick Croissant
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
VISEO
 

Similaire à Gagnez en productivité grâce aux préprocesseurs css (20)

CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
 
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MS...
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Conception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du webConception de code javascript cote client dans la continuité du renouveau du web
Conception de code javascript cote client dans la continuité du renouveau du web
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 

Gagnez en productivité grâce aux préprocesseurs css