DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[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);
  }
}