包含一個CSS類到另一個樣式

是否可以將一個CSS類的樣式包含到另一個類中？我的意思是SASS @extends幾乎做了類似的事情，但它也風格擴展類，這不是必需的。見例如：包含一個CSS類到另一個樣式

<style> 
 
.myclass1{ 
 
    background:red; 
 
} 
 

 
.myclass2{ 
 
    color:blue; 
 
    @extend .myclass1; 
 
} 
 
</style> 
 

 
<div> 
 
    <p class="myclass2">Hello i am class 2, my text is blue and background is red</p> 
 
</div> 
 

 
<div> 
 
    <p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p> 
 
</div>

發佈實例的CSS-tricks Web文章的啓發，但這裏的一切都非常混亂它不工作，因爲它應該。 myclass2應根據文章給予myclass1。但是，它給出了奇怪的輸出。我正朝着正確的方向前進嗎？或者是文章錯誤？

更新： 問題只是背後SAAS的@extend實際的概念，包括其他的CSS類到另一個，而且有什麼區別？

來源

2016-02-05 Zulqurnain Jutt

似乎在代碼片段中工作正常？ – Lee

......你仍然需要編譯SASS才能使'@ extend'工作。 –

從您鏈接到的文章：*所有三個最流行的CSS預處理器支持擴展*。你沒有使用任何預處理器，你試圖把它當作CSS，而不是。 – Quentin

CSS無預處理器（SASS，LESS等等）：

.myclass1{ 
 
\t background:red; 
 
} 
 

 
.myclass2{ 
 
\t color:blue; 
 
}

<div> 
 
<p class="myclass1 myclass2">Hello, I am of class 2 (my text is blue) and of class 1 (my background is red)</p> 
 
</div> 
 

 
<div> 
 
<p class="myclass1">Hello, I am only of class 1 (my background is red)</p> 
 
</div>

您可以將多個類添加到相同的元素。

來源

2016-02-05 15:23:42 Rounin

SASS是一個CSS預處理器，它基本上意味着SASS語法被編譯成純CSS。這SASS提供了諸如@extend以及建立與$語法等變量的功能只可能使用SASS（不與CSS3可能）

話雖這麼說，你將能夠完成@extend功能的結果上海社會科學院在常規CSS簡單地通過鏈接一起上課：

.blue, .green { 
<your css here> 
}

來源

2016-02-05 15:24:03 Maxwelll

您可以用逗號來匹配多個選擇：

.myclass1, .myclass2 { 
 
    background: red; 
 
} 
 
.myclass2 { 
 
    color: blue; 
 
}

<p class="myclass2">Hello i am class 2, my text is blue and background is red</p> 
 
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>

來源

2016-02-05 15:26:24 Oriol

包含一個CSS類到另一個樣式

回答

相關問題