Slide 1
Slide 1 text
Initiation à Sass, Compass
et Susy
Pierre-Emmanuel Fringant
http://www.formation-cakephp.com
@pefringant
Slide 2
Slide 2 text
Les outils
Slide 3
Slide 3 text
SASS
● Scss, langage de programmation de Css
● Préprocesseur : Scss => Css
● Gère les erreurs de validation
Slide 4
Slide 4 text
Import de fichiers
● Séparation libre du code dans plusieurs
fichiers
● Composants réutilisables
● = un seul fichier CSS produit
scss/
partials/
_base.scss
_layout.scss
@import "partials/base";
@import "partials/layout";
Slide 5
Slide 5 text
Imbrication des sélecteurs
.gallery {
a {
color: red;
img {
border: 1px solid black; } } }
.gallery a {
color: red;
}
.gallery a img {
border: 1px solid black;
}
SCSS
CSS
Slide 6
Slide 6 text
Variables
$main-color: #0088CC;
h1 {
color: $main-color;
}
h1 {
color: #0088CC;
}
SCSS
CSS
Slide 7
Slide 7 text
Fonctions
h2 {
color: lighten(#0088CC, 15%);
}
h2 {
color: #1AB2FF;
}
SCSS
CSS
Slide 8
Slide 8 text
Opérations
$site-width: 960px;
$content-width: 640px;
#sidebar {
width: $siteWidth - $contentWidth;
}
SCSS
#sidebar {
width: 320px;
}
CSS
Slide 9
Slide 9 text
Référence au parent
a {
color: blue;
&:hover {
color: red;
}
}
SCSS
a { color: blue; }
a:hover { color: red; }
CSS
Slide 10
Slide 10 text
Extend
%message {
font-weight: bold;
}
.notice {
@extend %message;
font-size: 2em;
}
.error {
@extend %message;
color: red;
}
SCSS .notice {
font-weight: bold;
font-size: 2em;
}
.error {
font-weight: bold;
color: red;
}
CSS
Slide 11
Slide 11 text
Mixins
@mixin rounded-box($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.big-box {
@include rounded-box(20px);
}
SCSS
.big-box {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
CSS
Slide 12
Slide 12 text
Mixins Paramètres par défaut
@mixin rounded-box($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.standard-box {
@include rounded-box();
}
SCSS
.standard-box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
CSS
Slide 13
Slide 13 text
Mixins Paramètres nommés
box-shadow: 2px 1px 0 black; CSS
@include single-box-shadow($voff: 1px, $color: black,
$hoff: 2px);
SCSS
Slide 14
Slide 14 text
Media queries
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
SCSS
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
.sidebar {
width: 300px;
}
CSS
Slide 15
Slide 15 text
● Framework pour Sass
● Bibliothèque de mixins Sass
● Plusieurs environnements
● Extensible par des plugins
● Projet suivi et communauté riche
Slide 16
Slide 16 text
Mixins Scss
● Reset
● CSS3
● Sprites
● Typographie (rythme vertical)
Slide 17
Slide 17 text
CSS3
● Indépendant des préfixes (-webkit, -moz, ...)
.rounded-box {
@include border-radius(5px);
}
SCSS
.rounded-box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
CSS
Slide 18
Slide 18 text
CSS3
● border radius
● gradient
● transform
● animations
● opacity
● text shadow
● box shadow
● etc...
Slide 19
Slide 19 text
Rythme vertical
html {
font-size: 16px;
line-height: 1.5em;
}
CSS
● Définition de la hauteur de ligne
@import "compass/typography";
@include establish-baseline(16px);
SCSS
Slide 20
Slide 20 text
Rythme vertical
Slide 21
Slide 21 text
Rythme vertical
h1 {
font-size: 1.5em; // 1.5 = 24 / 16
line-height: 2em; // 2 = 3 / 1.5
}
CSS
● Les autres définitions de taille seront relatives
à cette valeur
h1 {
@include adjust-font-size-to(24px);
}
SCSS
Slide 22
Slide 22 text
Rythme vertical
h2 {
font-size: 1.375em; // 1.375 = 22 / 16
line-height: 2.18182em; // 2.18182 = 3 / 1.375
}
CSS
h2 {
@include adjust-font-size-to(22px);
}
SCSS
Slide 23
Slide 23 text
Sprites
images/
actions/
new.png
edit.png
save.png
delete.png
@import "actions/*.png";
@include all-actions-sprites;
SCSS
Slide 24
Slide 24 text
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 25
Slide 25 text
Sprites retina
@import "retina-sprites";
$sprites: sprite-map("sprites/*.png");
$sprites2x: sprite-map("sprites2x/*.png");
.ico-facebook {
@include retina-sprite(facebook, png);
}
SCSS
github.com/AdamBrodzinski/Retina-Sprites-for-Compass
Slide 26
Slide 26 text
Environnements
● Développement : commentaires automatiques
Slide 27
Slide 27 text
Environnements
● Production : compact, strict minimum
Slide 28
Slide 28 text
● Plugin de grilles pour Compass
● Gestion des breakpoints pour le responsive
● Idéal pour un design "mobile first"
Slide 29
Slide 29 text
Initialiser Susy
● Définir la grille
@import "susy";
$total-columns: 7;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: 0;
$container-style: fluid;
.page {
@include container;
@include susy-grid-background;
}
SCSS
Slide 30
Slide 30 text
Grille de base
Slide 31
Slide 31 text
Breakpoints
$tablet-portrait: 8;
$tablet-landscape: 10;
.page {
@include container;
@include susy-grid-background;
}
@include at-breakpoint($tablet-portrait) {
.page {
@include container;
@include susy-grid-background;
}
}
SCSS
Slide 32
Slide 32 text
Breakpoints
Slide 33
Slide 33 text
Breakpoints
$tablet-portrait: 8;
$tablet-landscape: 10;
.page {...}
@include at-breakpoint($tablet-portrait) {
.page {...}
}
@include at-breakpoint($tablet-landscape) {
.page {
@include container;
@include susy-grid-background;
}
}
SCSS
Slide 34
Slide 34 text
Breakpoints
Slide 35
Slide 35 text
Exemple
HTML
● Une liste de 4 éléments
...
...
...
...
Slide 36
Slide 36 text
Exemple sur les 3 breakpoints
7 colonnes 8 colonnes 10 colonnes
Slide 37
Slide 37 text
Breakpoint 7 colonnes
.features {
@include span-columns($total-columns omega);
.feature {
@include span-columns($total-columns omega);
}
}
SCSS
Slide 38
Slide 38 text
Breakpoint 8 colonnes
@include at-breakpoint($tablet-landscape) {
.features {
.row {
@include span-columns($total-columns omega);
.feature {
@include span-columns($total-columns / 2);
@include nth-omega(2n);
}
}
}
}
SCSS
Slide 39
Slide 39 text
Breakpoint 10 colonnes
@include at-breakpoint($tablet-portrait) {
.features {
.row:first-child {
@include span-columns($total-columns / 2);
}
.row:last-child {
@include span-columns(($total-columns / 2) omega);
}
}
}
SCSS
Slide 40
Slide 40 text
Installer Compass
● GUI complet
http://mhs.github.com/scout-app (Gratuit - Mac, Windows)
http://compass.handlino.com (10$ - Mac, Linux, Windows)
● En ligne de commande Mac et Linux
$ gem update --system
$ gem install compass
● Windows
Installer Ruby for Windows
http://rubyinstaller.org
$ gem install compass
Slide 41
Slide 41 text
Créer un projet Compass
● Nouveau projet
$ compass create
● Projet existant
$ cd
$ compass install compass
Slide 42
Slide 42 text
Travailler avec Compass
$ cd
$ compass watch
Slide 43
Slide 43 text
Installer Susy
● Installer la Gem ruby
$ gem install susy
● Ajouter dans le fichier config.rb de Compass
require "susy"
Slide 44
Slide 44 text
Conclusion
● Facile à installer
● Facile à utiliser
● Profiter de toutes les fonctionnalités avancées
de CSS sans la complexité de leur syntaxe
● Possible de commencer en CSS pur et
d'introduire du Sass petit à petit
Slide 45
Slide 45 text
Des questions ?
[email protected]
http://www.formation-cakephp.com
@pefringant