no way to compare when less than two revisions

Differences

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

@@ 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);
+  }
+}