Sass & Compass

BIEN DÉMARRER




Thierry MICHEL, belge, plus tout jeune, 
presque 20 ans de web…

Je forme les webdesigners et développeurs front-end
de demain @cepegra.
J'élève des futurs champions @skillsbelgium.



It’s CSS’s turn to level up!



CSS has no abstraction at all and is highly repetitive. While that simplicity was key to its adoption, it makes it unwieldy for us today.

Préface de Sass for web designers, par Chris Coyer









N'est-ce pas 

un peu dangereux

tout ça ?






2006





*Dexter, THE IT CROWD, PARIS WEB

ou le coup de boule de Zinedine Zidane…


1. Définition(s)


Programme qui procède à des transformations sur un code source, avant l'étape de traduction proprement dite (compilation ou interprétation).

Wikipédia


1. DÉFINITION(S)


Sass est un métalangage, en amont de CSS,
à la syntaxe simplifiée et élégante
qui implémente diverses fonctionnalités utiles à la création et la gestion
des feuilles de styles.
Il est analysé et compilé en langage CSS classique, compréhensible par le navigateur.

Compilation…


1. Définition(s)

factory Created with Sketch. SASS CSS


Un petit dessin vaut parfois mieux qu'une longue définition…


2. Avantages(Ssss)



  • Validation
  • Optimisation
  • Modularité
  • Maintenabilité
  • “Scalabilité” (ou évolutivité)
  • Productivité


3. Inconvénient…



  • Ligne de commande
  • Live FTP
  • …
  • Intégration workflow



Á noter également que @garcimor ne fait pas partie de la team…
Tu codes comme un flan en CSS, tu coderas comme un super flan en SASS !
















Sass doesn't create bad code. Bad coders do.

➤  read it later…


4. Sass, less, stylus, … ?











interdit aux trolls…


4. Les + de sass


  • Extensions (Compass, Bourbon, Susy, …)*
  • Fonctionnalités
    • Contrôles et directives
    • Variables et types
    • %placeholder


➤  *Sache (Find Sass and Compass extensions)


PS : choisissez toujours l'outil qui vous convient
ou correspond le mieux à vos besoins !


5. Mise en place



CLI (Command Line Interface)

le Terminal quoi...










Ne partez pas !

Shut Up and Shell : ➤  The Command Line Crash Course


5. MISE EN PLACE



CLI (COMMAND LINE INTERFACE)

le Terminal quoi...


$ gem install sass

$ sass --watch style.scss:style.css
$ sass --watch dev:css

Les + : facile dans un environnement Ruby
Les - : ouvrir le vilain terminal…


$ est un placeholder pour l'invite de votre terminal. Vous ne devez pas le saisir.


5. MISE EN PLACE



Applications


Les + : interface graphique, facile, embarque d'autres fonctionnalités
Les - : coût(?), gestion avancée (versions, options, …)

5. MISE EN PLACE



Tasks Managers






Les + : intégration dans un flux de tâches ou de déploiement
Les - : Terminal 2, le retour de la vengeance…

5. MISE EN PLACE



Autres outils






Les + : test, débogage, partage, gist
Les - : pas utilisable pour la production

















6. Fonctionnalités


0. SASS vs SCSS ?!??


.SCSS (Sassy CSS) 

.doodle {
    color: #d00dle;
}
√  n'importe quel document CSS valide l'est aussi avec SCSS !


.SASS (Older syntax)

.doodle
    color: #d00d1e
vous êtes familier avec Ruby, Python, Coffee Script, Jade, …


1. Output style


nested (default)

expanded

compact

valid-icon Created with Sketch. compressed




Quel que soit le format choisi,
ne jamais éditer directement les fichiers .css !!!


2. @import et les partials


                  dev/
                      ∟ main.scss
                      ∟ _ normalize . scss
                      ∟ path/
                            ∟ to/
                                   ∟ file.scss

main.scss 

@import 'normalize';
@import 'path/to/file.scss';
@import 'compass/layout';


2. @import et les partials



@import est exécuté normalement avec les fichiers .css ou url().

Par contre, les fichiers .scss sont importés avant la compilation.
Pas de requête HTTP comme avec un import CSS classique.
---
Les fichiers .scss préfixés d'un "_" ne sont pas compilés.
L'extension et le préfixe sont facultatifs lors de l'import.
Il sont appelés partials. 

@import 'partial'; /* nom du fichier : _partial.scss */


3. nesting



css “classique”

nav {
    overflow: hidden;
}
nav li {
    float: left;
}
nav li a {
    display: block;
}


3. nesting


scss

nav {
    overflow: hidden;

    li {
        float: left;
    
        a {                     // nav ul li a = 4 niveaux !
            display: block;
        }
    }
}
Les + : lisibilité, structure, moins de code

!important  ➤  INCEPTION RULE  (4 niveaux de profondeur maximum)


4. & (Parent selector)


scss

a {
    color: #dec0de;
        &:hover {                 // & = a
        color: #c0dec5;
    }
}


output

a { color: #dec0de; }

            
            a:hover { color: #c0dec5; }


4. & (Parent selector)


scss

.nav {
    a {
        display: block;

    .touch & {                 // & = .nav a
        min-height: 44px;
    }
}


output

.nav a { display: block; }
.touch .nav a { min-height: 44px; }

Les + : maintien de la structure, souplesse


5. // Comments */ 


// n'apparaît pas à la sortie

/*
   apparaît à la sortie
   sauf si output style = compressed
*/

/*!
    apparaît à la sortie
    quel que soit le mode…
*/

Les + : documentation côté “dev”, performance côté “prod”





Don't repeat yourself!

[DRY PRINCIPLE - The Pragmatic Programmer]








par opposition à WET pour “write everything twice” ou “we enjoy typing”…


aspects Méthodologiques


et aussi la conf de Hugo ^^


---

aspects Techniques


c'est par là  ☞


6. $variables


scss

$width: 5em;
$color: #5a1ade;

main {
    width: $width;
    background-color: $color;
}
a {
    color: $color;
}

output

main { width: 5em; background-color: #5a1ade; }
a { color: #5a1ade; }


6. $variables


Tout ce qui est susceptible d'être modifié => VARIABLE !


Différents types

scss

$number:  10;          // 10, 3.5, 2em
$string:  "texte";     // "foo", 'bar', baz
$color:   #f1a5c0;     // black, #000, rgba(0,0,0,0.5)
$boolean: true;        // true, false
$list: (a b c d);      // ou ('a', 'b', 'c', 'd')
$map: (
    key1: value1,
    key2: value2
);


6. $variables


Différents opérateurs [+,-,*,/,%]

scss

$margin: 1em;
$color: #010203;
$wtf: "Comic Sans";

main {
    margin-bottom: $margin * 2;     // 2em
    color: $color * 2;              // #020406
    background: $color + #102030;   // #112233
    font-family: $wtf + " MS";      // "Comic Sans MS"
}


7. @extend + %placeholder


Le problème


css “classique”

h1, h2 { 
    font-weight: 700; 
    font-style: italic;
}                                                      // L32
…
aside .more { font-weight: 700; }                      // L468
…
.submit { font-weight: 700; text-transform: none; }    // L1220
…
footer .note { font-weight: 700; font-size: 2em; }    // L2675
…


7. @extend + %placeholder


Le résultat souhaité

css

h1,
h2,
aside .more,
.submit,
footer .note { 
    font-weight: 700;
}
h1, h2 { 
    font-style: italic;
}
…

Les - : fastidieux, suppression de la structure


7. @extend + %placeholder


sass à la rescousse : partial (1/3)


base/_typography.scss

h1, h2 { 
    font-weight: 700; 
    font-style: italic;
}                                                      // L2
…
aside .more { font-weight: 700; }                      // L14
…
.submit { font-weight: 700; }                          // L27
…
footer .note { font-weight: 700; }                     // L32
…


7. @extend + %placeholder


sass à la rescousse : @extend (2/3)

base/_typography.scss

.font-bold {
    font-weight: 700;
}
h1, h2 { 
    @extend .font-bold;
    font-style: italic;
}
…

output

.font-bold, h1, h2, aside .more, .submit, footer .note {
    font-weight: 700;
}
h1, h2 { 
    font-style: italic;
}


7. @extend + %placeholder


sass à la rescousse : %placeholder (3/3)

base/_typography.scss

%font-bold {
    font-weight: 700;
}
h1, h2 { 
    @extend %font-bold; 
}
…

output

h1, h2, aside .more, label.error, .submit, footer .note {
    font-weight: 700;
}
h1, h2 { 
    font-style: italic;
}


8. @mixin + @include


Le problème


Portions de code “partiellement” identiques
.button:hover {
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
             transform: scale(1.5);
}
ou encore…
header { margin: 0 auto; border-bottom: 1px solid #b4d455; …}
aside { margin: 0 auto; border-left: 1px solid #b4d455; …}
footer { margin: 0 auto; border-top: 1px solid #b0de6a; …}


8. @mixin + @include


sass à la rescousse

scss

@mixin scale {
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
}
.button:hover {
    @include scale;
}

output

.button:hover { 
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
}


8. @mixin + @include


remember: dry!!!

scss

@mixin scale {
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
}
@mixin scale2 {
    -webkit-transform: scale(2);
        -ms-transform: scale(2);
            transform: scale(2);
}
@mixin scale32 {
    -webkit-transform: scale(32);
        -ms-transform: scale(32);
            transform: scale(32);
}


8. @mixin + @include


mixin + paramètre

scss

@mixin scale($value) {
    -webkit-transform: scale($value);
        -ms-transform: scale($value);
            transform: scale($value);
}
.button:hover {
    @include scale(1.5);
}

output

.button:hover { 
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
}


8. @mixin + @include


mixin + paramètre + valeur par défaut

scss

@mixin scale($value: 1.5) {
    -webkit-transform: scale($value);
        -ms-transform: scale($value);
            transform: scale($value);
}
.button:hover {
    @include scale();
}

output

.button:hover { 
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
}

un pas plus loin (suite avec Hugo)

utils/_mixins.scss

@mixin set-border($side: top, $width: 1px, $color: black) {
    border-#{$side}: $width solid $color;
}

utils/_helpers.scss

%center-block {
    margin: 0 auto;
}

layout/_header.scss

header {
    @extend %center-block;
    @include set-border(bottom, $color: #b4d455);
}

layout/_footer.scss

footer {
    @extend %center-block;
    @include set-border(top, $color: #b0de6a);
}


9. @function { … }


SASS functions

@mixin button($color: #666) {
    background: $color;
    :hover {
        background: lighten($color, 15%);
    }
    :active {
        background: darken($color, 15%);
    }
}
.confirm {
    @include button(green);
}
.cancel {
    @include button(red);
}
➤  http://sass-lang.com/documentation/Sass/Script/Functions.html


9. @function { … }


Custom functions

scss

@function rem($value, $base: 16) {
  @return $value / $base * 1rem;
}
h1 {
  font-size: rem(42);
}
.more {
  font-size: rem(24);
}

output

h1 { font-size: 2.625rem; }
.more { font-size: 1.5rem; }


10. @media { … }


Sass permet l'imbrication, bien pratique, des règles @media

scss

.sidebar {
    width: 100%;

    @media screen and (min-width: 40em) {
        width: 40%;
        float: right;
    }
}

output

.sidebar { width: 100%; }
@media screen and (min-width: 40em) {
  .sidebar { width: 40%; float: right; }
}


10. @media { … }


Sass (encore) à la rescousse

scss

// définition des breakpoints*
$bp: (
  small: 36em,
  medium: 48em,
  large: 62em
);

// et le mixin qui-va-bien…
@mixin mq($size) {
    @media (min-width: map-get($bp, $size)) { 
      @content;
    }
}

* les types “map” sont disponibles depuis la version 3.3 de Sass



scss

.sidebar {
    width: 100%;
    @include mq(small) {
        width: 40%;
        float: right;
    }
}

output

.sidebar { width: 100%; }
@media screen and (min-width: 40em) {
  .sidebar { width: 40%; float: right; }
}




              …


un peu de rab pour la route ?


@if 


$boolean: true;

@mixin display {
  @if($boolean == true) {
    display: block;
  } @else {
    display: none;
  }
}

.foo {
  @include display;          // display: block;
}


@for … from … through

scss

$slugs: small medium large !default;

@for $i from 1 through length($slugs) {
  .#{nth($slugs, $i)} {
    width: 20em * $i;
  }
}

output

.small { width: 20em; }
.medium { width: 40em; }
.large { width: 60em; }


@for … from … to

scss

$slug: span !default;
$width: 60px;
$margin: 20px;

@for $i from 1 to 4 {
  .#{$slug}-#{$i} {
    width: ($width + $margin) * $i - $margin;
  }
}

output

.span-1 { width: 60px; }
.span-2 { width: 140px; }
.span-3 { width: 220px; }


@each … in  (with list)

scss

$colors: red blue green !default;

@each $color in $colors {
  .#{$color} {
    color: $color;
  }
}

output

.red { color: red; }
.blue { color: blue; }
.green { color: green; }


@each … in  (with map)

scss

$colors: (
  error: red,
  info: blue,
  success: green
) !default;

@each $label, $color in $colors {
  .#{$label} {
    color: $color;
  }
}

output

.error { color: red; }
.info { color: blue; }
.success { color: green; }

En résumé


  1. Ligne de commande (simple) ou application
  2. Compatibilité CSS : syntaxe SCSS
  3. Minification : output style compressed
  4. Méthodologie et structure projet : _partials.scss
  5. Lisibilité structure HTML : nesting + & (parent selector)
  6. Commentaires
  7. DRY (Don't Repeat Yourself)
    • $variables + operators
    • @extend + %placeholder
    • @mixin($param: default) + @content + @include
    • sassFunction() + @function customFunction()
    • Directives (@if, @for, @each)


Et bien d'autres choses ! ^^

factory Created with Sketch. SASS CSS conclusion Created with Sketch.


Un petit dessin vaut parfois mieux qu'une longue définition…













1. Compass ?


  • mixins
  • mixins
  • et encore des mixins…
  • mais pas que !


Compass est une extension “CSS3” qui utilise Sass.
C'est une roue (parmi d'autres) que vous ne devez pas inventer.


C'est aussi un excellent moyen de mieux comprendre
et d'approfondir votre connaissance de Sass.*


* comme avec beaucoup d'autres frameworks…


2. démarrage


Une petite gemme Ruby supplémentaire

installation

$ gem update --system
$ gem install compass

création projet

$ compass create <nom-de-mon-projet>

ou via votre application préférée !


➤  Compass “configurateur” (custom config.rb)


3. utilisation


Est compris dans le package de base :
  • CSS3
  • Helpers
  • Typography
  • Utilities

main.scss

 @import "compass";

output


3. utilisation


Disponible “on demand” :
  • Reset
  • Layout

main.scss

@import "compass";
@import "compass/reset";
@import "compass/layout";


L'importation du noyau n'est pas nécessaire  

pour l'utilisation de ces modules.


La plupart des modules sont composés de sous-modules
qui peuvent être importés séparément

main.scss

// @import "compass";
@import "compass/css3";
@import "compass/typography";
…
ou encore

main.scss

// @import "compass";
// @import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/font-face";
…

NB : Ces modules ne générant aucun code CSS, … hum…


Un petit exemple et puis…

RTFM !

scss

@import "compass";

a {
    @include link-colors(#acce55, #1abe15);
    @include border-radius(20px);
}

output

a { 
    color:#acce55;
    -webkit-border-radius:20px;
       -moz-border-radius:20px;
            border-radius:20px;
}
a:hover { color:#1abe15 }


Un petit mot sur les

Variables configurables


Il y a deux façons de déclarer ces variables dans Sass

mode classique

$var: "foo";
$var: "bar";             // $var = "bar";

mode "par défaut"

$var: "foo";
$var: "bar" !default;    // $var = "foo";
$var: "bar" !default;    // $var = "bar";

Avec ce mécanisme, si la variable existe, sa valeur est maintenue.
Si la variable n'a pas encore été déclarée, elle est créée.



Compass utilise !default pour la définition de nombreux paramètres.

$default-border-radius: 5px !default;

Dans votre projet Compass (et dans tous les autres),
lorsque vous souhaitez modifier des valeurs par défaut,
il est primordial de “redéclarer” ces variables AVANT !!!

utils/_variables.scss

$default-border-radius: 20px;

main.scss

@import "utils/variables";
@import "compass";     // $default-border-radius = 20px


Allez, je craque quand même pour…

les Sprites !


Prenons un dossier avec une série d'icônes :

                  img/
                       ∟ social/
                            ∟ github_hover.png
                            ∟ github.png
                            ∟ twitter_hover.png
                            ∟ twitter.png
                            ∟ …


Avec trois petites lignes de code :

scss

@import "compass";
@import "social/*.png";
@include all-social-sprites;


Je laisse agir la magie Compass…



Et…


TAdaaam !


output

.social-sprite, .social-github, .social-googleplus, … {
  background-image: url('/img/social-s8ecd8521e9.png');
  background-repeat: no-repeat;
}
.social-github {
  background-position: 0 0;
}
.social-github:hover, .social-github.github-hover {
  background-position: -64px 0;
}
.social-googleplus {
  background-position: -128px 0;
}
…


Merci de votre attention !

Des Questions ?













@thierrymichel


NOUVEAUX MODULES WEB !

Sass : boostez vos CSS | Frameworks CSS, démarrer avec Bootstrap  |  Responsive Web Design  |  Prototypage d'un site web
 Stratégie UX, le web centré utilisateur  |  Mailchimp : outil d’e-mailing
Un email responsive, c’est possible  |  DRY, GIT, GRUNT, SMACSS … méthodologie et productivité  |  Se passer de jQuery  |  Intégrer les données du web via les APIs  |  Webapp, convertir son site web en application  |  NoSQL, plus de flexibilité dans vos projets  |  … 


CEPEGRA.BE  |  GRAPHICSIDEOFLIFE.BE  |  @CEPEGRA

Sass et Compass, bien démarrer

By Thierry Michel

Made with Slides.com

Sass et Compass, bien démarrer

Conf FEWEB | Bruxelles | 08 mai 2014

  • 4,342

More from Thierry Michel