在Sass中重复单个声明的最佳方法是什么？

Question

在我的项目中，我有许多元素会使用此属性text-align: center 我们如何避免使用Sass在所有元素中编写此声明？

换句话说，是否有更有效的方法来做这样的事情：

.one {
  text-align: center;
}
.two {
  text-align: center;
}

Answer 1

尝试使用纯CSS的力量！

.one, .two {
    text-align: center;
}

Answer 2

使用mixins

例如

声明

@mixin centerAlign {
  text-align : center;
}

使用

.one {
  @include centerAlign;
}
.two {
   @include centerAlign;
}

Answer 3

您也可以尝试这样

.text-center{
    text-align:center;
}

在html代码中包含要显示居中对齐的文本中心。 前

<p class='text-center'>...</p>

<div class='text-center'>...</div>

Answer 4

您还可以使用扩展程序：

.center-align {
  text-align:center
}

.one, .two {
  @extend .center-align;
  /*additional styling*/
}

它几乎与以前发布的方式相同