sasset:understanding_sass
Table of Contents
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