User Tools

Site Tools


sasset:creating_basic_mixins

Differences

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

Link to this comparison view

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