SASS,什么时候延长？

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.使用具有一个属性的类来扩展类的纯粹愚蠢是不可理解的,该类具有单位值.

有关扩展原因的更好示例可以在参考指南中找到

假设我们有2个班级

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

.error 是一般的没有趣的风格,但严重的错误应该是非常清楚的.

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

因为我们是懒惰,只想用一个类,而不是重复,可能在未来,我们可以延长改变代码.seriousError与.error

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

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

查看参考指南以获取更多/更好的示例.

只是为了小猫的目的,请停止使用一个属性类扩展类.并且不要隐式声明选择器中的值/属性,这不是非常语义的.

您和您的团队应该阅读这篇文章,该文章解释了您在这里采用的方法与语义代码之间的一些问题.这个快速找不到更好的调整帖子.

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;
}