User Tools

Site Tools


sasset:understanding_sass

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

sasset:understanding_sass [2016/03/30 21:03] (current)
leo created
Line 1: Line 1:
 +|<- [[Using the exercise files]]|[[Analyzing installation options]] ->|
  
 +==== 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.
 +
 +<​code>​
 +.classe
 +  ul
 +    margin: 0
 +    li
 +      float: left
 +</​code>​
 +=== 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
 +
 +<​code>​
 +.classe {
 +  ul {
 +    margin: 0
 +    li {
 +      float: left
 +    }
 +  }
 +}
 +
 +</​code>​
 +==== Exemples ====
 +
 +=== Variables ===
 +<​code>​
 +$rouge : #ff000;
 +$bleu : #0000ff;
 +</​code>​
 +=== nesting ===
 +<​code>​
 +.classe {
 +  //styles
 +  ul {
 +    // styles
 +    li {
 +      //styles
 +    }
 +  }
 +}
 +</​code>​
 +=== Partials ===
 +<​code>​
 +@import "​mixins";​
 +</​code>​
 +=== Extend ===
 +<​code>​
 +.mon_style { color: $red; }
 +.mon_style_etendu {
 +  @extend .mon_style;
 +  background: $bleu;
 +}
 +</​code>​
 +=== Opérateurs ===
 +<​code>​
 +$bordure: 1px;
 +$bordure_epaisse:​ $bordure * 5;
 +
 +.sidebar {
 +  @if ($bordure<​=1) {
 +    background: $rouge;
 +  } @else {
 +    background: $bleu;
 +  }
 +}
 +</​code>​
 +
 +=== 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