RWD - Notes livre - ch 3 - Intro Sass et Compass

Portrait de Jenny
Soumis par Jenny le 23 mar 2015 - 16:31

Tags:

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

Installation de Sass/Compass

sudo apt-get install ruby-full rubygems1.8
sudo gem install sass
sudo gem install compass

Les bases SCSS/Compass

On va réécrire des CSS en SCSS :

CSS SCSS
A gauche des CSS simples, à droite les meme en SCSS

.nav {
  background: #131313;
  border: 1px solid #fafafa;
}

.nav ul {
  list-style-type: none;
}

.nav ul li {
  margin: 0;
  padding: 0;
  display: inline;
  background: #fafafa;
}
.nav ul li a {
  color: #131313;
}

$lightgray: #fafafa;
$darkgray: #131313;

.nav {
  background: $darkgray;
  border: 1px solid $lightgray;

  ul {
    list-style-type: none;

    li {
      margin: 0;
      padding: 0;
      display: inline;
      background: $lightgray;

      a {
        color: $darkgray;
      }
    }
  }
}
#131313 est répété et est "en dur"
les sélecteurs sont de plus en plus long (vers le bas)
déclarations répétées ds 2e, 3e et 4e règle		  

Modif de ce code SCSS pour mettre ul en ligne (replacer ul et li):
ul {
    @include inline-list; /* Yay! Voir ci dessous. */
    li {
      background: $lightgray;

inline-list est un mixin de Compass.

@mixin inline-list {
  list-style-type: none;
  &, & li {
    margin: 0px;
    padding: 0px;
    display: inline; } }

Apercu des fonctionnalités avancées

Par ex, assombrir au survol création d'une palette de couleur
Sass calcule les couleurs : 2 ex simples
button, .button {
  background: $color-purple;
  &:hover {
    background: darken($color-purple, 20%);
  }
}		 $color-primary: #bada55;
$color-secondary: complement($color-primary);
   

Générer des sprites avec Compass

Compass peux créer des images sprite à partir d'un dossier d'images, générer les SCSS nécessaire à son utilisation. Peux générer les selecteurs active, target et hover quand on ajoute ces mots aux noms des fichiers image.

Ecrire ses mixin, sans parler des tonnes de plugins (grilles, slideshow, bouton, dégradés de type gradient...).

Trouver ses erreurs

Les CSS que voient le navigateur (du dev) ne sont pas celles qu'on est en train de mettre au point, mais celles que Sass a produit (et les lignes de code indiquées ne correspondent pas).

Chrome retrouve les fichiers Sass d'origine: faire F12 (Tools/dev) et clic en bas à droite sur settings pour activer (sous sources) "Enable CSS source maps" et "Auto-reload generated CSS".
Pour aller à la source .scss on a 2 choix: CTRL+clic sur une valeur ou propriété CSS, ou encore ouvrir le .scss et aller à la bonne ligne.