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)

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

Scout (free)
Koala (free)
Compass.app ($10)
Livereload ($10)
Prepros (free/$24)
Mixture ($39)
Hammer (Mac only, $24)
Codekit (Mac only, $29) ♡♡♡
…

Les + : interface graphique, facile, embarque d'autres fonctionnalités

Les - : coût(?), gestion avancée (versions, options, …)

5. MISE EN PLACE

Tasks Managers

Grunt task -> grunt-contrib-sass (+ grunt-contrib-watch)
Gulp task -> gulp-sass
Make, Ant, … et plein d'autres !

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

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

OOCSS, SMACSS, BEM, DRY CSS, …

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é

Ligne de commande (simple) ou application
Compatibilité CSS : syntaxe SCSS
Minification : output style compressed
Méthodologie et structure projet : _partials.scss
Lisibilité structure HTML : nesting + & (parent selector)
Commentaires
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 ! ^^

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 !