Question

示例：

mycssfile1.css：

.a { a:ssss; b:llll;}

mycssfile2.css：

.b { c:iiii;
   addclass .a
}

与.b {c：iiii; a：ssss; b：llll;}

相同

Answer 1

你不能用原生CSS做到这一点。您正在寻找的是CSS预编译器，如SASS。示例，inspired from the doc：

.a { 
   prop1:val1;
   prop2:val2;
}


.b {
  @import "a";
  prop3:val3;
}

Answer 2

许多人之前说过，你需要使用CSS预处理器来完成这项工作。有两个基本相似的概念，它们的核心用法不同，但它们都可以满足您的需求。这两个概念是扩展和导入。

我是Sass最有经验的人，所以我将在Sass中解释如何做到这一点，但在其他预处理器中也是如此。

当您导入 css时，您正在创建一个名为 mixin 的可重用代码，可以将其包含在需要的任何位置。例如，写

@mixin red-copy{ 
    font-family: sans-serif;
    font-size: 14px;
    color:red;
}

h1{
    @include red-copy;
}
p{
    @include red-copy;
}

输出看起来像的CSS：

h1{
    font-family: sans-serif;
    font-size: 14px;
    color:red;
}
p{
    font-family: sans-serif;
    font-size: 14px;
    color:red;
}

你也可以传递这样的变量：

@mixin default-copy($color: red){
    font-family: sans-serif;
    font-size: 14px;
    color: $color;
}

h1{
    @include default-copy(blue);
}
h2{ 
    @include default-copy(green);
}
p{
    @include default-copy;
}

将输出到：

h1{
    font-family: sans-serif;
    font-size: 14px;
    color: blue;
}
h2{
    font-family: sans-serif;
    font-size: 14px;
    color: green;
}
p{
    font-family: sans-serif;
    font-size: 14px;
    color: red;
}

扩展略有不同，因为您正在扩展现有的CSS声明。他们看起来像这样

.error{
    border: 1px solid red;
    color:red;
}
.serious-error{
    @extend .error;
    border-width:5px;
}

哪个会编译为：

.error, .serious-error{
    border: 1px solid red;
    color:red;
}
.serious-error{
    border-width:5px;
}

希望这有帮助！

在这里查看Sass：http://sass-lang.com/

在这里查看一下：http://lesscss.org/

在此处查看手写笔：http://learnboost.github.io/stylus/

Answer 3

难道你不能用逗号分隔这些类吗？

.a, .b {
    font-size: 12px;
    margin: 10px;
}

.b {
    padding-top: 20px;
}

css3，我可以在课堂上添加其他课程吗？

3 个答案: