- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
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).
_base.scss |
à importer dans par ex application.scss |
---|---|
|
|
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:
Padding Box
Border Box
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";