Question

所以，我正在研究一些命名约定。我想尝试使用类似于.block(red)的类名。

所以我的HTML看起来像：

<div class="block(red)"></div>

我的已编译的 css应如下所示：

.block(red) {
    padding: 100px;
    height: 100px;
    width: 100px;
    background: red;
}

所以我希望我的SASS看起来像：

.block {
  padding: 100px;
  height: 100px;
  width: 100px;
  &\(red\) {
    background: red;
  }
}

显然，因为类名的(red)部分只是扩展了父类名，所以它不会引入.block的样式，我可以在{{1}内@extend .block但是，随着时间的推移，这将会有点混乱。

那么，你们有什么方法可以想到，这让我像上面的例子那样写SASS而只需要在我的元素上写一个类吗？

Answer 1

首先，parentheses aren't allowed in CSS class names ，它们是为某些选择器保留的。更新：使用<script> function OpenPage(){ intel.xdk.device.launchExternal("http://www.example.com"); } </script> <a onclick="OpenPage();">Open Page</a>转义括号似乎是允许的并且有效。

如果你想做这样的事情，你可以使用OOCSS, BEM, SMACSS, ACSS or something similar。

更新

如果您真的只想使用一个CSS类，可以像这样使用 SCSS \(\) ：

Codepen： http://codepen.io/grrtbrtr/pen/KVeOja

<强> SCSS

@mixin

<强> HTML

@mixin modulify($selection-modifier) {
  $self: &;
  &\(#{$selection-modifier}\) {
    @content;
    @extend #{$self};
  }
}

.block {
  padding: 100px;
  height: 100px;
  width: 100px;

  @include modulify('red') {
    background: red;
  }

  @include modulify('blue') {
    background: blue;
  }
}

对我来说，它保持SCSS代码干净，并允许您在HTML中仅使用1个CSS类。

嵌套类中的父样式，但仅在元素上使用一个类名 - SASS

1 个答案:

更新