Sass 具有相同属性的多种样式答案

【问题标题】：Sass multiple styles with same attributesSass 具有相同属性的多种样式
【发布时间】：2016-07-19 19:32:49
【问题描述】：

有没有更快的方法在 Sass 中编写相同的样式结果？

例如没有 Sass：

bottom: auto;
left: auto;
right: auto;
top: auto;

用 sass

bottom,
left,
right,
top {
    auto;
}

【问题讨论】：

有一个旧的讨论在 SASS 中实现它。我认为这个功能还没有，但你可以使用这个 mixin：gist.github.com/alcidesqueiroz/323fbf9ebbd9ff1834f7 为 CSS 属性列表设置相同的值。

标签： sass

【解决方案1】：

我还不太擅长 Sass，但我认为你可以使用 mixins 来做到这一点

@mixin name_of_mixin {
  bottom: auto;
  left: auto;
  right: auto;
  top: auto;
}

然后

.box { @include name_of_mixin; }

【讨论】：

【解决方案2】：

我不确定它是否符合您的确切需求，但这可能是 mixin 的一种情况。

使用 SCSS 语法，这将是：

@mixin position($position) {
   bottom: $position;
   top: $position;
   left: $position;
   right: $position; }

然后您可以将 mixin 与

一起使用

div { @include position(auto); }

这相当于将每个定位属性设置为“自动”的 div

SASS 语法，为了完整起见

=position($position) {
   bottom: $position;
   top: $position;
   left: $position;
   right: $position; }

及用法

div
  +position(auto)

【讨论】：

这个 mixin 与我最喜欢的 Sass mixin 库 Bourbon 中包含的一个基本相同。他们的position() mixin 就是这样做的。它还有许多其他功能可以为您做类似的事情——无需添加任何您不要求的 CSS。