利用 CSS 与 Sass (SCSS) - 基类问题和冗余答案

【问题标题】：Making use of CSS vs Sass (SCSS) - base class issues and redundency利用 CSS 与 Sass (SCSS) - 基类问题和冗余
【发布时间】：2013-02-06 10:34:27
【问题描述】：

我正在尝试通过使用 SCSS 来清理我的 CSS。

标准 CSS：

.dark-hr,
.light-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  background-color: #595959;
}
.light-hr {
  background-color: #cccccc;
}

vs SCSS：

.generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @extend .generic-hr;
  background-color: #595959;
}
.light-hr {
  @extend .generic-hr;
  background-color: #cccccc;
}

有什么方法可以避免创建不会使用的“generic-hr”类？我希望某种巢能很好地工作。在这种情况下，CSS 绝对比 SCSS 更干净、更易读。

理想情况下，我需要它在 SCSS 中工作：

.## {
  // base class that is not outputted
  .dark-hr {
    //attributes the extend the base class '.##'
  }
  .light-hr {
    //attributes the extend the base class '.##'
  }
}

输出：

 .dark-hr, .light-hr {
   //shared attributes defined by '.##'
 }
 .dark-hr {
   // overrides
 }
 .light-hr {
   // overrides
 }

【问题讨论】：

你可以使用[class*='-hr']，这基本上意味着任何有-hr的类，至少你不需要每次都@extend，如果你选择添加更多@987654328 @classes，你不需要编辑/扩展任何东西
@ashley 你可以这样做，但是如果你需要添加一个没有“-hr”后缀但扩展@987654329的类会发生什么@?您还必须记住扩展[class*='-hr']，如果项目已经搁置几个月，很容易忘记。

标签： css sass oocss precompiler

【解决方案1】：

您想要使用的是一个扩展类（我称它们为“静默类”），它通过使用% 而不是. 来表示。

hr%base { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @extend hr%base;
  background-color: #595959;
}
.light-hr {
  @extend hr%base;
  background-color: #cccccc;
}

【讨论】：

【解决方案2】：

你通常不会做这样的事情吗：

.generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
  &.dark {
    background-color: #595959;
  }
  &.light {
    background-color: #cccccc;
  }
}

【讨论】：

这将在输出中包含.generic-hr。请参阅@cimmanon 的回答。

【解决方案3】：

我对这种事情的模式是混合：

@mixin generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @include generic-hr;
  background-color: #595959;
}
.light-hr {
  @include generic-hr;
  background-color: #cccccc;
}

这具有可扩展的额外优势，因此如果您发现自己需要几个具有非常相似属性的选择器，您可以添加变量：

@mixin generic-hr($background-color: transparent) { 
  width: 100%;
  height: 1px;
  margin: 15px 0px; 
  background-color: $background-color;
}
.dark-hr {
  @include generic-hr(#595959);
}
.light-hr {
  @include generic-hr(#cccccc);
}
.medium-hr {
  @include generic-hr(#818181);
}

【讨论】：

也是一个很好的解决方案。不过，我更喜欢扩展答案，因为 A) mixin 通常在它们自己的文件中，并且 B) 更接近我最初所需的解决方案。然而，您的解决方案可能意味着更少的代码。希望我可以将 2 个答案标记为正确。 :(