Sass具有相同属性的多个样式

Question

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

没有Sass：

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

使用sass

bottom,
left,
right,
top {
    auto;
}

Answer 1

我在Sass中表现不佳，但我认为你可以使用mixins

来做到这一点

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

然后

.box { @include name_of_mixin; }

在这里看看例子： https://www.sitepoint.com/sass-basics-the-mixin-directive/

Answer 2

我不确定它是否符合您的确切需求，但这可能适用于mixin。

使用SCSS语法，这将是：

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

然后您可以将mixin与

一起使用

div { @include position(auto); }

这相当于一个div，其中每个定位属性都设置为＆＃34; auto＆＃34;

SASS语法，为了完成起见

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

使用

div
  +position(auto)