Sass c'est quoi?

Sass - pour Syntactically Awesome Stylesheets - est un métalangage dynamique qui génère des feuilles de style (CSS).

Il permet de simplifier la syntaxe originale de CSS et d'y ajouter des éléments comme des variables pour augmenter la productivité du développeur mais aussi garantir une meilleure évolutivité du code.

Installer Sass

Tout d'abord il vous faudra installer Ruby et gem:

sudo aptitude install ruby-full

sudo aptitude install rubygems

Puis Sass:

sudo su -c "gem install sass"

Utiliser Sass

Il vous faudra déterminer un dossier dans lequel recevoir tous vos css. Dans ce dossier vous pouvez créer un dossier scss et y mettre vos fichiers sass.

Pour transformer un scss en css:

sass input.scss output.css

Pour créer les scss dès qu'il y a un changement sur le fichier spécifié:

sass --watch input.scss:output.css

Pour créer les scess dès qu'il y a un changement sur un fichier du dossier indiqué

sass --watch app/sass:public/stylesheets

Exemple

Créez le fichier suivant:

$bg_color : #FFF;
$menu_left : 25%;
$menu_right : 30%;

body{ 
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
}

div#content 
{
  background-color: $bg_color;
  width : 100% - $menu_left - $menu_right;
}

Puis lancez la commande de transformation de votre choix. Le rendu sera le suivant:

body h1 { font-size: 24px; }
body h2 { font-size: 20px; }

div#content {
  background-color: #FFF;
  width: 45%;
}

L'héritage de classe

Il est possible d'utiliser un héritage de classe:

.alert {
border:1px solid black;
background: white;
}
.alert-danger{
@extend .alert;
background: red;
}

Résultat:

.alert, .alert-danger {
  border: 1px solid black;
  background: white; }

.alert-danger { background: red; }

Les boucles

Il peut parfois arrivé que dans certains cas (pour des projets responsive design par exemple) un menu doit faire tant de pixel par rapport au support.

Si on travaille par tranche de 50px le faire à la main peut vite devenir ennuyeux. Pour éviter les erreurs et ce travail fastidieux on peut utiliser des boucles:

@for $i from 1 through 5 {
  @media (min-width: 500px + 50*$i ) { 
    #menu{  
      width:50px * $i; 
    }  
  }
}

Résultat:

@media (min-width: 550px) {
  #menu {
    width: 50px; } }
@media (min-width: 600px) {
  #menu {
    width: 100px; } }
@media (min-width: 650px) {
  #menu {
    width: 150px; } }
@media (min-width: 700px) {
  #menu {
    width: 200px; } }
@media (min-width: 750px) {
  #menu {
    width: 250px; } }

each

@each $item in c1, c2, c3, c4{
  .#{$item}-icon {
    background-image: url('/images/#{$item}.png');
  }
}

Résultat:

.c1-icon {
  background-image: url("/images/c1.png");
}

.c2-icon {
  background-image: url("/images/c2.png");
}

.c3-icon {
  background-image: url("/images/c3.png");
}

.c4-icon {
  background-image: url("/images/c4.png");
}

Les partiels / mixins

Vous devoir également savoir qu'il est possible de créer des fichiers "partiels", c'est à dire qui peuvent être importées mais qui ne seront pas compilés en CSS. Pour cela préfixer le nom du fichier avec un underscore. Cela vous permet de créer une librairie CSS.

Exemple de structure de fichiers partiels:

/partials/
    _header.scss
    _body.scss
    _footer.scss
main.scss

Pour importer un partiel:

@import "partials/header";
@import "partials/footer";
@import "partials/body";

---

Compass

Compass est un framework CSS pour Sass qui fournit une collection de mixins pour enrichir l'environnement Sass.

Installer Compass

sudo gem install compass

Créer un projet compass

compass create mon_projet
cd mon_projet
compass watch

Cette action créera:

• * un fichier de configuration config.rb
• * 3 feuilles de styles : screen.scss pour l'affichage écran print.scss pour l'impression ie.scss pour Internet Explorer.
• * un répertoire stylesheets qui reçoit les fichiers sources compilées

config.rb

Vous pouvez configurer Compass à votre guise:

Nom propriété	Type	Description
project_type	Symbol	Peut avoir comme valeur :stand_alone ou :rails. Par défaut :stand_alone.
environment	Symbol	L'environnement: Par défaut :development, peut être: :production
project_path	String	Pas utile dans le mode :stand_alone Indique le chemin de la racine projet
http_path	String	Le chemin du projet lorsqu'il est executé sur un serveur web. Par defaut: /
css_dir	String	Le répertoire où les CSS sont stockées. Le chemin est relatif par rapport au chemin du projet. Par defaut: stylesheets
css_path	String	Le chemin complet où les CSS sont stockées. Par défaut: <project_path>/<css_dir>
http_stylesheets_path	String	Le chemin complet aux CSS sur le serveur web. Par défaut: http_path + "/" + css_dir
sass_dir	String	Le répertoire où les fichiers Sass sont stockées. Le chemin est relatif à project_path. Par défaut: "sass" .
sass_path	String	Le chemin complet où les fichiers Sass sont stockés. Par défaut <project_path>/<sass_dir>.
images_dir	String	Le répertoire où les images sont stockées Chemin relatif par rapport à project_path. Par défaut: "images".
images_path	String	Le chemin complet où les images sont stockées Par défaut: <project_path>/<images_dir>.
http_images_path	String	Le chemin http complet des images sur le serveur web Par défaut: http_path + "/" + images_dir.
generated_images_dir	String	Le repertoire où les images générées sont stockées. Relatif à project_path. Par défaut: images_dir.
generated_images_path	String	Le chemin complet où les images générées sont stockées. Par défaut: <project_path>/<generated_images_dir>.
http_generated_images_path	String	Le chemin http complet des images générées sur le surveur web Par défaut:http_path + "/" + generated_images_dir.
javascripts_dir	String	Le répoertoire où sont stockés les fichiers js Raltif à project_path.Par défaut: "javascripts".
javascripts_path	String	Le chemin complet des fichiers js Par défaut:<project_path>/<javascripts_dir>.
http_javascripts_path	String	Le chemin http complet des fichiers js Par défaut: http_path + "/" + javascripts_dir.
output_style	Symbol	Le style de sortie pour les css compilées: Possibilités: :nested, :expanded, :compact, ou :compressed.
relative_assets	Boolean	Indique si les fonctions compass doivent générer des url relatives ou absolues dans les assets.
additional_import_paths	Array of Strings	Les autres chemins de votre système comportant des fichiers Sass. Voir add_import_path pour une approche simplifiée.
sourcemap	Boolean	Mettre à true pour activer une sortie sourcemap
disable_warnings	Boolean	Mettre à true pour désactiver les alertes
sass_options	Hash	Ces options sont passées directement au compilateur Sass. Pour plus d'infos: sass options.
line_comments	Boolean	Indique si les commentaires de ligne doivent être ajouter à la compilation du CSS . Par défaut à true en mode développement et à false en mode production.
preferred_syntax	Symbol	Peut être :scss ou :sass. Par défaut: :scss.
fonts_dir	String	Le réportoire où sont stockés les fichiers de police d'écriture (font) Par défaut pour les projets Standalone: <css_dir>/fonts. Pour les projets rails: "public/fonts".
fonts_path	String	Le chemin complet où sont stockés les fichiers de police d'écriture (font) Par défaut: <project_path>/<fonts_dir>.
http_fonts_path	String	Le chemin http complet vers la police d'écriture (font)
http_fonts_dir	String	Le chemin http relatif vers la police d'écriture sur le serveur web
sprite_engine	Symbol	Par défaut: :chunky_png
chunky_png_options	Hash	Par défaut: {:compression => Zlib::BEST_COMPRESSION}. Voir chunky_png wiki
sprite_load_path	Array	Par défaut: [images_path]

Pour lancer Compass, allez dans le dossier de votre projet compass et entrez la commande suivante:

compass watch

Dès qu'un fichier Sass est modifié la compliation se fera aussitôt.

Les sprites générés par Compass

Un sprite est une image qui contient plusieurs images. C'est une sorte de concaténation d'images. Cette astuce permet de faire une seule requete serveur pour avoir une multitude d'image qui seront affichés dans le navigateurs grâce à la technologie CSS.

Voici un exemple de création de sprite:

@import "compass";

$brands-sprite-dimensions: true;
@import "brands/*.png";

@include all-brands-sprites;

Le sprite (l'image) sera automatiquement crée lorsque vous modifierez le fichier sass si vous avez actionné le compass watch.

UNE QUESTION SUR L'ARTICLE?