Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
852 views
in Technique[技术] by (71.8m points)

css - Generic @mixin for sass with multiple and varied values

how do I create a generic @mixin in sass for multiple values with comma , and user might not now know how many values would each include of mixin would have?

The user might want to place one shadow in some case and may be 5 shadows in some different css style, and with different values.

What is the best approach or do we have choices?.

text-shadow: 0 0 5pt white,
                0 0 6pt white,
                0 0 7pt white,
                0 0 8pt white,
                0 0 9pt white,
                0 0 10pt white,
                0 0 11pt white,
                0 0 12pt white,
                0 0 13pt white,
                0 0 14pt white,
                0 0 15pt white,
                0 0 16pt white,
                0 0 17pt white,
                0 0 18pt white,
                0 0 19pt white;

I need to have something like this:

@mixin textShadow($h-shadow:$baseUnit * 0, $v-shadow:$baseUnit * 0, $blur:$baseUnit * 2, $color:white)
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

From the official documentation:

Sass supports “variable arguments,” which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by .... For example:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...