I try to build some universal margin/padding mixin...
This is my code:
[class*="shift"] {
$sft-o: 10px;
@mixin shift_stp($val) {
&[class*="_sml"]{ $val: $sft-o; }
&[class*="_mid"]{ $val: $sft-o * 2; }
&[class*="_big"]{ $val: $sft-o * 3; }
}
&[class*="_m"]{
@include shift_stp(margin);
}
&[class*="_p"]{
@include shift_stp(padding);
}
}
Something is not right, so I wonder if it is possible to set some CSS property as a mixin value? Can anybody help?
If you want to use variables as property names you need to use string interpolation - #{$var}
.
So this should work:
[class*="shift"] {
$sft-o: 10px;
@mixin shift_stp($val) {
&[class*="_sml"]{ #{$val}: $sft-o; }
&[class*="_mid"]{ #{$val}: $sft-o * 2; }
&[class*="_big"]{ #{$val}: $sft-o * 3; }
}
&[class*="_m"]{
@include shift_stp(margin);
}
&[class*="_p"]{
@include shift_stp(padding);
}
}
Just a note: for your attribute selectors ... *="_m"
will also apply to the ones that have _mid
in them (see here) ... so maybe you should rethink this a little.