SCSS

Sass = “Syntactically Awesome Stylesheets", utilise indenations.
SCSS en 2 versions: Sass (the original) et la nouvelle norme SCSS (plus proche des CSS)
Compass tourne au-dessus de Sass, c'est un gem ruby en ligne de commande qui observe les modifications des fichiers Sass (et recompile pour un navigateur les CSS brutes à la volée).

Plan:

1. Une ligne sur l'installation.
2. Un ex simple de réécritude de CSS (et ex de mixin Compass).
3. Apercu des fonct: Sass calcule les couleurs, Compass génère des sprites et les sélecteurs active, target et hover. Créer ses mixin.

https://www.drupal.org/project/bootstrap et doc à https://www.drupal.org/node/1976938 et http://drupal-bootstrap.org

Requiert JQuery (via le module jQuery Update ).  Pour  Bootstrap 3 (7.x-3.x): jQuery - 1.9.0+

Source: http://www.mediacurrent.com/blog/responsive-design-mobile-menu-options

voir aussi https://www.drupal.org/sandbox/kbasarab/1791874
http://bradfrost.com/blog/web/responsive-nav-patterns/
 

http://compass-style.org/

Les commandes Compass et best practices (si _base.scss sass ne crée pas de .css car _ ).
Comment utiliser les exemples Compass dans drupal 7 avec zen 5.5.

source http://thesassway.com/intermediate/using-object-oriented-css-with-sass

Les objets

motif visuel, qu'on peux résumer en un extrait indépendant de code HTML, CSS et js éventuellement.

Comment organiser le code CSS? en utilisant les objets et ces 2 principes:

Ex de code sass/compass (et css générées)

Ex variables.
Ex nesting selectors pour éviter les répétitions. + Notions de contexte (2 nivo), objets (identifié par class ou id, 4 nivo max, en général on travaille en 2-3) et états d'interaction (avec objects) - et leurs niveaux de profondeur respectifs.
Ex de Mixins, pour utiliser des bouts entier de code. Ex mixin border-radius

Utiliser: compass clean et compass watch

outils online: http://www.responsinator.com/ et sa faq  ; http://compass-style.org/ et http://compass-style.org/help/tutorials/spriting/ ;