有办法将“px”单位添加到Sass混合的参数数组中吗?

huangapple go评论48阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年4月19日 18:40:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76053559.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定