sasset:creating_basic_mixins
Differences
This shows you the differences between two versions of the page.
| — |
sasset:creating_basic_mixins [2016/04/02 11:49] (current) leo created |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | |<- [[Using Partials]]|[[Using the @extend method]] ->| | ||
| + | Mixins -> "Javascript-like functions" | ||
| + | |||
| + | <code> | ||
| + | @mixin <nom>(<paramètre 1>:<valeur par defaut>, <paramètre 2>, ..., >paramètre n>) { | ||
| + | <propriété>:<valeur>; | ||
| + | } | ||
| + | @include <nom>(<paramètre 1>, <paramètre 2>, ..., >paramètre n>); | ||
| + | |||
| + | @mixin backImage($image) { | ||
| + | background: url($image); | ||
| + | } | ||
| + | |||
| + | .style { | ||
| + | @include backimage('file.png'); | ||
| + | } | ||
| + | |||
| + | </code> | ||
| + | |||
| + | Les paramètres sont optionnels : | ||
| + | |||
| + | <code> | ||
| + | @mixin clearfix { | ||
| + | &:before, | ||
| + | &:after { | ||
| + | content:''; | ||
| + | display: table; | ||
| + | } | ||
| + | &:after { | ||
| + | clear:both; | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
sasset/creating_basic_mixins.txt · Last modified: 2016/04/02 11:49 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
