CSS3 et les Préprocesseurs

Sommaire

• Les apports de CSS3
• Les préprocesseurs
  • SASS
  • LESS
• Les utilitaires (Grump & Gulp)

Les apports de CSS3

CSS 3

Développement de la norme CSS 3 en 1999.

Organisation modulaire qui permet de faciliter les mises à jour et l'implémentation par les différents navigateurs

Modules

• Nouveaux sélecteurs
• Box Model
• Backgrounds et borders
• Text effects
• Transformations 2D et 3D
• Animations
• Layouts Multi Colonnes

Propriétés

• Bordures
  • border-radius
  • border-image
• Fonds
  • background-size
  • background-origin
  • background-clip
• Transformations
• Transitions
• Animations

• Couleurs
  • RGBA (opacité)
  • HLS et HLSA
  • opacity
  • Gradients (Linear ou Radial)
• box-sizing
• Flexbox

Propriétés

• Ombres
  • text-shadow
  • box-shadow
• Texte
  • text-overflow
  • word-wrap
  • word-break
  • @font-face

• Colonnes
  • column-count
  • column-gap
  • ...
• Styles sur images et boutons
• @media queries

Les préprocesseurs

Le principe

Le CSS a certaines limites :

• Répétitions
• Manque de centralisation
• Manque de dynamisme

Les préprocesseurs apportent donc des solutions à ces soucis

• SASS : 
  • Compilé par Ruby
  • Compilé côté serveur
• LESS 
  • Compilé par Jaascript
  • Compilé côté serveur ou côté client

Ils fonctionnent globalement de la même façon

Les apports des préprocesseurs

Le but principal des meta langages CSS sont d'apporter :

• Les variables
• Les fonctions et opérateurs
• Les mixins
• Les imbrications
• Les imports

Que l'on écrive en syntaxe SASS ou LESS, les deux procédés nécessitent une compilation (transpilation) en un fichier CSS compréhensible par le navigateur.

Les variables en SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

L'imbrication en SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Les imports en SCSS

// _reset.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// base.scss
@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Les mixins en SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Les héritages en SCSS

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Les opérateurs en SCSS

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Les fonctions

SASS, comme LESS, permet aussi de créer des fonctions personnalisées et intègre des fonctions basiques sur les chaines, les nombres, les listes, etc.

/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) 
            + $replace 
            + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

Les outils

Processeurs

Les processeurs nous permettent de transpiler des fichiers SCSS ou LESS en fichiers CSS compréhensibles pour les navigateurs.

SASS possède son propre préprocesseur mais on utilise souvent compass car il intègre des fonctionnalités supplémentaires

Tasks runners

Un tasks runner est une brique logiciel qui permet d'automatiser différentes taches nécessaires à la mise en place de vos fichiers.

Gulp et Grunt sont des tasks runners basés sur Node.JS et permettent notamment d'automatiser la compilation SCSS ou LESS (et beaucoup d'autres choses)

Conclusion

CSS a eu beau évoluer énormément depuis sa création (CSS 4 bientôt disponible), il reste un langage simpl(ist)e et déclaratif peu dynamique et peu réutilisable

Il existe donc des métalangages (SCSS ou LESS) permettant de mieux écrire en CSS, d'utiliser variables et fonctions. Ils nécessitent des préprocesseurs pour faire la traduction en CSS classique

On utilise de plus en plus des tasks runners pour automatiser ces opérations

A vous !

Sources et documentations

Sass Lang : http://sass-lang.com/

Less : http://lesscss.org/

Compass : http://compass-style.org/

Nouveautés CSS 3 : http://www.w3schools.com/css/css3_intro.asp