Question

有没有办法将CSS类定义为等于另一个？例如，如果我有一个班级：

.myClass{
    background-color: blue;
}

有没有办法将第二个类定义为与myClass具有相同的样式而不仅仅是复制和粘贴？

编辑：

对不起，让我更清楚一点。在声明第一个类之后是否可以这样做，甚至可能在另一个样式表中？

Answer 1

是的，就像这样：

.myClass,
.mySecondClass,
.myThirdClass {
    background-color: blue;
}

修改

基于你的编辑：你可能正在寻找什么，如果这是你真正想做的事情，那就是研究SASS，它基本上就像css，但有变量和东西。但vanilla CSS对你想要的东西没有任何原生支持。

Answer 2

不使用纯CSS。您可以使用名为SASS（http://sass-lang.com/）的技术，使用@extend函数来执行此操作。

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

我认为LESS也有这种能力，但我没有验证它。

Answer 3

你在考虑为你的CSS创建某种变量吗？如果是这种情况，您应该查看SASS或LESS。

两者都允许使用样式变量，例如：

/* sass/less css */
@color: #4D926F;

#header { color: @color; }
h2 { color: @color; }

/* rendered css */
#header { color: #4D926F; }
h2 { color: #4D926F; }

LESS也有nested rules所以如果你有重叠的规则，你就不必经常一遍又一遍地写它们。

/* rendered css */
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

/* less css */
#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

希望这能为您提供更多的起点：）

Answer 4

.myClass, .myOtherClass{
    background-color: blue;
}

在CSS中引用CSS

4 个答案: