Chargement...

CSS SASS COMPASS


Saas compass

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

Saas 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.

Si vous rencontrez l'erreur suivante: `sprite_does_not_have_parent': undefined method `parent' for nil:NilClass. Vous avez probablement nommé un fichier avec un chiffre ou un tiret et dans certains cas Compass n'aime pas et bug.



UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW