User Tools

Site Tools


sasset:understanding_sass

What is SASS

  • une extensions à CSS
  • un langage pré-processé
  • est extensible via des plugins (Compass, ???, Susy)
  • écrit en Ruby

Features

  • variables
  • nesting
  • partials : permet des séparer le CSS en modules
  • extend : sorte d'héritage, on peut baser un sélecteur sur un autre.
  • Opérateurs
  • Mixins : macros, semblable à ajouter du javascript dans son CSS

Syntaxe

SASS

  • Avantage : très concis.
  • Peut-être pas pour le débutant en SASS.
.classe
  ul
    margin: 0
    li
      float: left

SCSS

  • Syntaxe plus récente
  • La même chose que SASS hormis l'ajout de ponctuation, la même que CSS mais avec les ajouts de SASS
  • Avantage : possibilité d'intégrer du CSS dans du SCSS
.classe {
  ul {
    margin: 0
    li {
      float: left
    }
  }
}

Exemples

Variables

$rouge : #ff000;
$bleu : #0000ff;

nesting

.classe {
  //styles
  ul {
    // styles
    li {
      //styles
    }
  }
}

Partials

@import "mixins";

Extend

.mon_style { color: $red; }
.mon_style_etendu {
  @extend .mon_style;
  background: $bleu;
}

Opérateurs

$bordure: 1px;
$bordure_epaisse: $bordure * 5;

.sidebar {
  @if ($bordure<=1) {
    background: $rouge;
  } @else {
    background: $bleu;
  }
}

Mixins

@mixin rounded($radius: 10px) {

border-radius: $radius;

} ul {

li img {
  @include rounded(20px);
}

}

sasset/understanding_sass.txt · Last modified: 2016/03/30 21:03 by leo