SASS，何时延长？

css CSS

Stafan

2020-03-24

我目前正在使用SASS的团队工作。我看到我们正在扩展非常简单的样式，对我来说，这样做没有好处。我想念什么吗？

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

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

第3718篇《SASS，何时延长？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
AJinJin 2020.03.24

扩展选项在这里使用不佳。它应该用于扩展具有更多内容的类，在这种情况下，扩展会很有帮助。您可以在此处找到有关扩展及其选项的更多信息。

阿飞理查德神奇 2020.03.24

仅当您具有将被多次使用的特定属性集时，才应使用扩展。用一个具有一个属性的类扩展一个类的愚蠢的愚蠢的想法是难以理解的。

有关扩展原因的更好示例，请参见参考指南

说我们有2节课

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

.error 通常是一种没有意思的风格，但是应该很清楚地发现一个严重的错误。

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

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

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

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

查阅参考指南以获取更多/更好的示例。

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

您和您的团队应该阅读这篇文章，该文章解释了您在此处采用的方法与语义代码之间的一些问题。很快找不到更好的帖子。

null 2020.03.24

如果以这种方式进行操作，那么您也可以直接在HTML中使用它-看起来他们采用了OOCSS路径，并且因为它已经在CSS中了，所以您现在还可以扩展到它。非常灵活，但也可能变得很凌乱。

Mandy村村 2020.03.24

您什么都不会丢失，这只是形式poor肿的代码，而且不是扩展类的好方法。

我有一个（坏的）原因，我可以想象为什么会使用它。例如，如果.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;
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android