CODEWITHSUNDEEP
sassargumentsmixins
maw2be
maw2be

Reputation: 91

sass mixin - not all arguments used

I start using sass, at the moment I start to discover mixin and writing my own one. I have a mixin:

@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;
}

I would like to use it but not always with all arguments, for this reason I put them in order of how I think I will need them. But it looks like when I call this mixin I need to enter all arguments. Is there any way to avoid this? for example:

call1 @include column-set(3, 40px);

call2 @include column-set (2, 40px, 10px, solid, 1px, blue);

I try to find there answer but with no success. Can anyone help?

Upvotes: 0

Views: 281

Answers (1)

user4994625
user4994625

Reputation:

You can set a default value, if don't set a value in the @include the default value is used:

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

You can set to null also.

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

In the include you can call the parameters you want to use:

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

Upvotes: 1

Related Questions