SASS，什么时候延长？

时间：2012-03-22 18:07:00

标签： css sass

我目前正在开发一个使用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;
        }
    }
  }
}

5 个答案:

答案 0 :(得分：24)

只有在具有多次使用的特定属性集时，才应使用extend。使用具有一个属性的类扩展一个类的纯粹愚蠢是不可理解的。

可以在reference guide

中找到扩展原因的更好示例

假设我们有2个班级

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

.error是一般的没有趣的风格，但严重的错误应该非常明确。

创建

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

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

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

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

查看参考指南，了解更多/更好的示例。

为了小猫的利益，请停止使用一个属性类扩展类。并且不要在选择器中隐式声明值/属性，这不是非常语义化的。

您和您的团队应read this post解释您在这里与语义代码相关的一些问题。无法找到更好的调整帖子。

答案 1 :(得分：7)

你没有遗漏任何东西，这只是表现不佳的膨胀代码而不是扩展类的好方法。

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

答案 2 :(得分：1)

Atomic CSS

非常简单的CSS规则技术确实有一些先例 - 在Yahoo!他们称之为Atomic CSS。 Thierry Koblentz在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>

答案 3 :(得分：0)

如果你这样做，你也可以直接在HTML中使用它 - 所以看起来他们采用了OOCSS路径，因为它已经在CSS中，你现在也可以扩展到它。非常灵活，但也可能变得非常混乱。

答案 4 :(得分：0)

这里使用的扩展选项很差。它应该用于扩展具有更多内容的类，在这种情况下，扩展可能非常有用。您可以找到有关扩展及其选项here的更多信息。

相关问题
最新问题