sasset:using_the_extend_method
Differences
This shows you the differences between two versions of the page.
| — |
sasset:using_the_extend_method [2016/04/02 11:51] (current) leo created |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | |<- [[Creating basic mixins]]|[[Referencing parent selectors with &]] ->| | ||
| + | Étendre les fonctionnalités d'une classe avec une autre | ||
| + | |||
| + | <code> | ||
| + | .style_a { | ||
| + | background:red; | ||
| + | } | ||
| + | .style_b { | ||
| + | @extend .style_a; | ||
| + | color: black; | ||
| + | } | ||
| + | .style_c { | ||
| + | @extend .style_a; | ||
| + | color: blue; | ||
| + | } | ||
| + | |||
| + | // output : | ||
| + | |||
| + | .style_a, .style_b, .style_c { | ||
| + | background:red; | ||
| + | } | ||
| + | .style_b { | ||
| + | color: black; | ||
| + | } | ||
| + | .style_c { | ||
| + | color: blue; | ||
| + | } | ||
| + | |||
| + | </code> | ||
| + | |||
| + | Invisible class : si on a pas besoin d'un classe dont on hérite | ||
| + | |||
| + | <code> | ||
| + | %style_a { | ||
| + | background:red; | ||
| + | } | ||
| + | .style_b { | ||
| + | @extend .style_a; | ||
| + | color: black; | ||
| + | } | ||
| + | .style_c { | ||
| + | @extend .style_a; | ||
| + | color: blue; | ||
| + | } | ||
| + | |||
| + | // output : | ||
| + | |||
| + | .style_b, style_c { | ||
| + | background:red; | ||
| + | } | ||
| + | .style_b { | ||
| + | color: black; | ||
| + | } | ||
| + | .style_c { | ||
| + | color: blue; | ||
| + | } | ||
| + | |||
| + | </code> | ||
sasset/using_the_extend_method.txt · Last modified: 2016/04/02 11:51 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
