Question

有没有办法可以编写css类嵌套，如下所示。

.className{

  .childclassName1{

  }
  .childclassName2{

  }
}

因为我在产品中进行了一些样式更改，但管理层希望这些更改只需要暂时放在一个特定页面中，然后再全局应用。所以我不能将该页面的类名添加到每个选择器（例如：.className .childclassName1等等）中，它将耗费大量时间。

Answer 1

您可以使用LESS或SASS执行此操作。所以如果你有：

<div class="container">
   <p>Text</p>
   <a href="#">Link</a>
</div>

你可以写如下：

container {
  text-align:center;
  p {
    font-size:12px;
  }
  a {
    text-decoration:none;
  }
}

http://lesscss.org/

Answer 2

不，这个语法没有在CSS中定义，但你可能已经在 scss （SASS）或 less （LESS）中看到了，这两个是流行的 CSS预处理器。这些不仅添加了更友好的语法，还允许您定义变量并进行一些编程处理，如条件等。

http://sass-lang.com/

http://lesscss.org/

看一下LESS示例：

 @base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}

.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

缺点：你需要编译它来生成最终的样式表，但即使我们特别谈到Less，它也没有那么复杂，它有一个开箱即用的客户端编译器。

Answer 3

你不能在你想要影响的页面主体上添加一个类，然后用body.mynewclass为你的所有规则添加前缀

CSS在类中编写类

3 个答案: