为自定义边框编写 SCSS mixin [重复]

Question

我想知道是否可以使用 mixin 来自定义边框。我网站上的所有边框都是实心的，所以我可以将其发酵到位，但所有其他值可能会有所不同。这意味着，位置（这里错误地称为“方向”），即左、右、上或下，边框的大小（以像素为单位）及其颜色。我尝试了以下方法，但 Prepros 抛出错误 Invalid CSS after " border-": expected "{", was "$direction: $si..."。

@mixin border($direction,$size,$colour) {
  border-$direction: $size solid $colour;
}

Answer 1

您只需要使用variable interpolation。示例：

@mixin border($direction,$size,$colour) {
  border-#{$direction}: $size solid $colour;
}

SassMeister 示例：http://sassmeister.com/gist/b5119d77bae5582a0cc5

关键是在边框方向周围添加#{和}使其扩大。