英文:
Is there a way to add "px" unit to an array of parameters for Sass mixins?
问题
@mixin nine-border-slice($imagePath, $slice) {
$width: nth($slice, 1) + 0px nth($slice, 2) + 0px nth($slice, 3) + 0px nth($slice, 4) + 0px;
border-image-source: url($imagePath);
border-image-slice: $slice fill;
border-width: $width;
border-style: solid;
}
@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95 25);
// border-image-source: url('../stories/assets/speech_bubble.png');
// border-image-slice: 19 44 95 25 fill;
// border-width: 19px 44px 95px 25px;
// border-style: solid;
@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95);
// border-image-source: url('../stories/assets/speech_bubble.png');
// border-image-slice: 19 44 95 fill;
// border-width: 19px 44px 95px;
// border-style: solid;
英文:
Here's my current solution, but it doesn't seem optimal as it will produce errors if the $Slice has less than four elements. I'm wondering if there's a better way to handle this.
@mixin nine-border-slice($imagePath, $slice) {
$width: nth($slice, 1)+0px nth($slice, 2)+0px nth($slice, 3)+0px nth($slice, 4)+0px;
border-image-source: url($imagePath);
border-image-slice: $slice fill;
border-width: $width;
border-style: solid;
}
@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95 25);
// border-image-source: url('../stories/assets/speech_bubble.png');
// border-image-slice: 19 44 95 25 fill;
// border-width: 19px 44px 95px 25px;
// border-style: solid;
@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95 );
// border-image-source: url('../stories/assets/speech_bubble.png');
// border-image-slice: 19 44 95 fill;
// border-width: 19px 44px 95px;
// border-style: solid;
答案1
得分: 0
@mixin nine-border-slice($imagePath, $slice) {
$width: ();
@for $i from 1 through length($slice) {
$width: append($width, nth($slice, $i) + px);
}
border-image-source: url($imagePath);
border-image-slice: $slice fill;
border-width: $width;
border-style: solid;
}
英文:
The better solution is to loop over the $slice
array and append px
to each value of the array, you can use a @for
loop, for achieving this:
@mixin nine-border-slice($imagePath, $slice) {
$width: ();
@for $i from 1 through length($slice) {
$width: append($width, nth($slice, $i) + px);
}
border-image-source: url($imagePath);
border-image-slice: $slice fill;
border-width: $width;
border-style: solid;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论