css3，我可以添加其他類到一個類嗎？

Question

實施例：

mycssfile1.css：

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

mycssfile2.css：

.b { c:iiii; 
    addclass .a 
} 

作爲相同.B {C：IIII;一個：SSSS; B：LLLL;}

Answer 1

正如許多人之前說的，你需要使用一個CSS預處理器來做到這一點。有兩個基本相似的概念，它們的核心用法不同，但它們都可以做你所需要的。這兩個概念是延伸和進口。

我是Sass最有經驗的人，所以我會解釋如何在Sass中做到這一點，但在其他預處理器中是如此。

當你導入 CSS，你正在創建一個可重用的代碼稱爲混入當需要時可以被包括在內。例如，寫

@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; 
} 

希望這有助於！

退房薩斯這裏：http://sass-lang.com/

退房LESS這裏：http://lesscss.org/

退房手寫筆的位置：http://learnboost.github.io/stylus/

Answer 2

你不能用原生CSS做到這一點。你正在尋找的是CSS預編譯器，如SASS。例如，inspired from the doc：

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


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

Answer 3

你不能只是類用逗號分隔？

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

.b { 
    padding-top: 20px; 
}