sasset:understanding_sass
Differences
This shows you the differences between two versions of the page.
| — |
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
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
