萨斯，什么时候扩展？

Question

我目前在一个使用SASS的团队中工作。我看到我们正在扩展非常简单的样式，对我来说，我看不到这样做的好处。我是不是遗漏了什么？

以下是在其他sass文件中导入和使用的_Common.scss的一些示例：

.visibility-hidden{visibility: hidden;}
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-none { display: none; }
.display-box { display: box; }

.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }

.width-percent-100 { width: 100%; }
.width-percent-65 { width: 65%; }
.width-percent-50 { width: 50%; }
.width-percent-45 { width: 45%; }
.width-percent-40 { width: 40%; }
.width-percent-33 { width: 33%; }
.width-percent-30 { width: 30%; }
.width-percent-20 { width: 20%; }

.height-percent-100 { height: 100%; }

.cursor-pointer { cursor: pointer; }

.underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }
.bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }

.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }

.font-percent-65 { font-size: 65%; }
.font-percent-80 { font-size: 80%; }
.font-percent-90 { font-size: 90%; }
.font-percent-100 { font-size: 100%; }
.font-percent-110 { font-size: 110%; }
.font-percent-120 { font-size: 120%; }
.font-percent-130 { font-size: 130%; }
.font-percent-140 { font-size: 140%; }
.font-percent-150 { font-size: 150%; }
.font-percent-160 { font-size: 160%; }
.font-percent-170 { font-size: 170%; }
.font-percent-180 { font-size: 180%; }

示例：

#CategoriesContainer
{
  ul{
    li{
        &:first-child{
          @extend .font-11;
        }
        a
        {
          @extend .font-11;
          @extend .text-decoration-none;
        }
    }
  }
}

Answer 1

只有当您具有将多次使用的特定属性集时，才应使用extend。用一个只有一个属性的类来扩展一个类是非常愚蠢的，因为这个属性将单元值放入了它的名称中。

关于扩展的原因，可以在reference guide中找到更好的示例

假设我们有两个班级

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

.error是一个普通的，没有什么有趣的风格，但一个严重的错误应该是非常清楚的。

创建.seriousError是为了加粗线条，唯一的问题是我们现在必须使用html中的两个类来组合样式。

因为我们很懒，只想使用一个类，而不想重复将来可能会更改的代码，所以我们可以用.error扩展.seriousError

.seriousError {
  @extend .error;
  border-width: 3px;
}

现在我们没有复制sass文件中的代码，但在页面上获得了正确的样式。

有关更多/更好的示例，请查看参考指南。

为了小猫的缘故，请停止用一个属性类来扩展类。并且不要在选择器中隐式声明值/属性，这不是很有语义。

您和您的团队应该使用read this post，它解释了您在这里使用的方法与语义代码之间的一些问题。找不到这么快就能找到更好的文章了。

Answer 2

你没有遗漏任何东西，这只是一种形式很差的臃肿的代码，并不是扩展类的好方法。

也许有一个(不好的)原因，我可以想象为什么会使用这个。例如，如果.font-10需要为.7em而不是10px，那么可以很容易地更改它-而不是，那么您就失去了将类命名为"font10“的意义。在这种情况下，像small-font这样的东西甚至更有意义(我也不建议您使用它)。

我不会讨论语义类名的优点和表示类的愚蠢之处(特别是像它们这样的)，但我会建议这是扩展类的一种非常狭隘的用途。使用类名到属性/值的1:1映射，你实际上已经违背了@extend的目的，它应该让你编写更少的CSS。

更好的使用@extend的示例：

.media {
    padding:1em;
    border-color:blue;
    background-color:red;
    clear:left;
}

.my-media {
    @extend .media;
    background-color:green;
}

Answer 3

原子CSS

非常简单的CSS规则的技术确实有一些先例-在Yahoo！他们称之为原子CSS。蒂埃里·科布伦茨在this Smashing Magazine article中主张直接在标记中使用简单的类，类似于内联样式。这对跨多个web属性的大型项目很有帮助，因为这些项目的样式不一致。在这种情况下，OOCSS组件的基本样式不能被重用，导致您必须编写更多行的扩展类或重写。

当然，像Wesley mentioned一样，缺点是在整个项目的样式中进行更改要困难得多，比如更新特定选择器的文本大小。

我最近在一个相当大的项目中尝试了这种技术的一个变体，其中的样式通常是一次性的。为了避免出现这种情况，我尽量避免将硬值直接放入选择器中。例如，下面的css (example fiddle)：

_colors.scss

.text-white {
  color: $white;
}

.blue {
  @extend .text-white;
  background: $blue;
}

_effects.scss

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
}

.matted {
  border: 4px solid $white;
}

.shadow {
  @include box-shadow(0 1px 4px 1px rgba($black, 0.25));
}

HTML：

<div class="blue matted circle shadow">?</div>

专用性问题

如果您决定使用此技术，请记住最后一件事-如果您正在扩展使用相同CSS属性的基本级别的类，则它可能会导致特定问题。例如，在下面的示例(fiddle)中，您的边界半径将如何显示？您希望顶部是方形的(没有边界半径)，但这并没有发生，因为.circle类在您的css中位于更低的位置，并且与其他效果一样具体(单个类)。这是一个人为的例子，但是如果您在原子选择器中重用CSS属性，这可能是一个真正的问题。

_colors.scss

.text-white {
  color: white;
}

.blue {
  @extend .text-white;
  background: royalblue;
}

_effects.scss

.squared-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded {
  border-radius: 10px;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

HTML：

<span class="circle blue rounded squared-top"></span>