2016-07-22 32 views
0

Ich beginne mit Sass, im Moment entdecke ich Mixin und schreibe eigene. Ich habe einen mixin:Sass Mixin - nicht alle Argumente verwendet

@mixin column-set ($number, $width, $gap, $rule-style, $rule-width, $rule-color, $col-span) { 
-webkit-column-count: $number;  /* Chrome, Safari, Opera */ 
-moz-column-count: $number;  /* Firefox */ 
column-count: $number; 
-webkit-column-width: $width;  /* Chrome, Safari, Opera */ 
-moz-column-width: $width;   /* Firefox */ 
column-width: $width; 
-webkit-column-gap: $gap;   /* Chrome, Safari, Opera */ 
-moz-column-gap: $gap;    /* Firefox */ 
column-gap: $gap; 
-webkit-column-rule-style: $rule-style; /* Chrome, Safari, Opera */ 
-moz-column-rule-style: $rule-style;  /* Firefox */ 
column-rule-style: $rule-style; 
-webkit-column-rule-width: $rule-width; /* Chrome, Safari, Opera */ 
-moz-column-rule-width: $rule-width;  /* Firefox */ 
column-rule-width: $rule-width; 
-webkit-column-rule-color: $rule-color; /* Chrome, Safari, Opera */ 
-moz-column-rule-color: $rule-color;  /* Firefox */ 
column-rule-color: $rule-color; 
-webkit-column-span: $col-span;   /* Chrome, Safari, Opera */ 
column-span: $col-span; 
} 

ich es verwenden möchte, aber nicht immer mit allen Argumenten, aus diesem Grunde ich sie in Ordnung zu bringen, wie ich glaube, ich sie brauche. Aber es sieht so aus, als wenn ich Thins mixin anrufe, muss ich alle Argumente eingeben. Gibt es eine Möglichkeit, dies zu vermeiden? zum Beispiel call1 @include column-set (3, 40px); call2 @include Spaltensatz (2, 40px, 10px, fest, 1px, blau);

Ich versuche, dort Antwort zu finden, aber ohne Erfolg. Kann jemand helfen?

Antwort

1

Sie können einen Standardwert gesetzt, wenn kein Wert in der @include der Standardwert verwendet gesetzt:

kann
@mixin column-set ($number:3, $width:200px, $gap:20px){ 
... 
} 

Sie auch auf null gesetzt.

@mixin column-set ($number:3, $width:null, $gap:null){ 
... 
} 

Im schließen Sie die Parameter, die Sie verwenden möchten, rufen können:

.class{ 
    @include column-set($gap:10px) 
}