Compass

Compass utilise Sass (en dec 2014: v 3.4.9). La conf de Sass est dans un fichier ruby.  http://compass-style.org/
Des ex compass sont à http://compass-style.org/examples/

Compass CLI

http://compass-style.org/help/documentation/command-line/

Commandes "projet"
compass watch et compass compile, compass create ou pour projet existant: compass init rails path/to/project [--using blueprint]
install extension dans projet: compass install blueprint/buttons [path/to/project]
compass config et compass validate

Commandes "misc"
compass stats, compass version, compass unpack extension, compass interactive (pour test script sass)
* créer une image de fond (utile pour vérifier l'alignement de ses grilles: compass grid-img W+GxH [path/to/grid.png]
   avec W=largeur d'une col en px G=largeur d'une goutière en px  et H=hauteur de la police en px. Ex:

# 40px column, 10px gutter, 20px height at <images_dir>/grid.png
compass grid-img 40+10
# 40px column, 20px gutter, 28px height at <images_dir>/grid.png
compass grid-img 40+20x28
# 60px column, 20px gutter, 28px height at images/wide_grid.png
compass grid-img 60+20x28 images/wide_grid.png

Conseils (best practices)

source: http://compass-style.org/help/tutorials/best_practices/

créer et utiliser une feuille de style de base _base.scss

car quand commence par un underscore _ sass comprend qu'on veux l'importer mais ne génère pas de fichier CSS ("partials").
De la doc Sass: par ex si l'on a _colors.scss alors aucun _colors.css ne sera créée, et on peux @import "colors"; pour importer  _colors.scss (et on peux l'appeler sans le _).

_base.scss pour initialiser vos feuilles de style avec des variables communes (et souvent aussi des services frameworks), ses mixins (qui seront ainsi dispo pour toutes vos feuilles de style qui l'importent).

$blueprint-grid-columns : 24;
$blueprint-grid-width   : 30px;
$blueprint-grid-margin  : 10px;
$font-color             : #333;

@import "compass/reset";
@import "compass/utilities";
@import "blueprint";

// etc (mes mixins partagés...)

@import "base";

#wrapper {
  @include container;
}

// etc.

Par la suite, 1. définir les constantes compass (ou de framework) qu'on veux overrider dans _base.scss avant de 2. faire le @import (cf use var)

Ecrire ses propres mixins

pour insérer des lignes de style dans un sélecteur et ses decendants.

Nested selector mais pas trop

Les nested sel doivent etre au début de l'arbre.
Des noms de sélecteurs long impacte la performance. Ex: ne pas faire table thead tr th si un simple th est suffisant.

Comment utiliser les exemples de Compass ?

Les ex sont à http://compass-style.org/examples

On va utiliser http://compass-style.org/examples/compass/css3/background-clip/
bordure rouge avec transparence. Le padding est rose sur fond blanc et la bordure pourpre (avec le bleu du fond)
et qui produit la sortie suivante:

Comment procéder ?

1. si cela n'est pas déja fait, aller dans le dossier du thème: sudo compass watch

2. copier le code HTML suivant dans un article (après avoir cliqué sur le bouton Source de Ckeditor). Cela affiche 2 lignes (avec Padding Box et Border  Box) - dans ckeditor on ne voit pas les styles scss

<div class='example'>
  <div id='padding-box'>
    Padding Box
  </div>
  <div id='border-box'>
    Border Box
  </div>
</div>

3. coller le code scss (sans la 1ere ligne @import "compass/css3.scss";) par ex tout en bas de  mon_theme/sass/_init.scss *

// test 7 dec 2014
// http://compass-style.org/examples/compass/css3/background-clip/
.example {
  padding: 2em;
  div {
    background-color: blue;
    border: 10px solid rgba(255, 0, 0, 0.5);
    color: white;
    @include text-shadow(darken(blue, 50%) 2px 2px);
    padding: 3px;
    text-align: center;
    margin-bottom: 2em;
  }
  #padding-box {
    @include background-clip(padding-box);
  }
  #border-box {
    @include background-clip(border-box);
  }
}

On peux voir le css généré (bas droite) pour comparer.

Note Zen 5.5 * Utiliser _init.scss est sale. Faire plutot:

Créer son fichier (ici nommé ex.scss ou encore mon_theme.scss) dans themes/mon_theme/sass/ex.scss et l'importer en bas de themes/mon_theme/sass/styles.scss avec @import "ex";