將一個類的多個css規則合併到一個類聲明中？

我喜歡在css中分離出一個類的不同顧慮。將一個類的多個css規則合併到一個類聲明中？

實施例：

// Layout 
.myElement { 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    padding: 5px; 
} 

// Chrome 
.myElement { 
    background: red; 
    border: 2px solid green; 
    box-shadow: inset 0 0 10px black; 
} 

// Content 
.myElement { 
    color: white; 
    font-size: 120%; 
} 

// Interaction 
.myElement:hover { 
    background: black; 
    border: 10px dotted red; 
}

漂亮細爲止。就我個人而言，我發現這種方法可讀性強，維護性好，適合開發。但是有沒有任何機制/工具可以將一個類的所有規則合併爲一個單獨的類聲明之前自動部署？

期望的結果：

.myElement { 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    padding: 5px; 
    background: red; 
    border: 2px solid green; 
    box-shadow: inset 0 0 10px black; 
    color: white; 
    font-size: 120%; 
} 

.myElement:hover { 
    background: black; 
    border: 10px dotted red; 
}

編輯：閱讀評論之後，我覺得我的「人造」的例子是不夠全面的。以下是使用Stylus語法編寫的真實世界示例，但結果與上述相同。我從上面留下原始示例。下一個例子作爲一個單獨的文件存在，它描述了某個地區及其內容出現在網站上各個地方的情況。這就像那個地區的縮影。因此，你可以想象還有更多這樣的微觀世界。

// Layout 
.events 
    padding 2em 

.eventItem 
    margin 0 0 4em 

.eventCal 
    float left 
    padding 2.5em 0 0 

.eventArticle 
    margin 0 0 0 6em 

.eventHead 
    margin 0 0 1em 

    time 
     margin 0 2em 0 0 


// Chrome 
.eventCal 
    background url("../../assets/img/icon-events.png") no-repeat 

.eventHead 
    border-bottom .5em solid $chimney 


// Content 
.eventItem 
    list-style-type none 

    a 
     color $beige 
     text-decoration none 

    h2 
     font-family $elsie 

.eventCal 
    color $beige 
    font-family $elsie 
    font-weight bold 
    font-size 150% 

.eventHead 
    font-size 75% 

.eventDesc 
    font-size 90% 


// Interaction 
.eventItem  
    a:hover 
      color $chimney 
      text-decoration underline

來源

2013-05-06 Saucier

您可以隨時在您認識的班級中使用這些評論。 – 2013-05-06 18:44:56

是否有任何理由，你不能只是寫在你的期望的結果第一個地方寫的CSS代碼？你可以在這個單獨的課程中加入註釋...... – braican 2013-05-06 18:45:13

*可讀性好，維護性好*對於我來說，合併版本更容易理解。 – dfsq 2013-05-06 18:46:54

我的電腦是八九不離十我嘮叨編碼後的幾個連續天重啓，但基本上我在圖書館相當經常做類似的東西。基本上你可以做什麼來快速地模仿這個功能，就是抓住其中一個用於枚舉表單中CSSrules的編碼示例。

然後在枚舉函數乾脆把selectorText屬性，並將其拖放到document.querySelector/querySelectorAll這將給你匹配selectorText元素折騰這些，對selectorText及相關cssText入少許{}/[]或任何適合你的幻想。

枚舉完成後，請執行document.createElement（'style'）並使用insertRule（）將樣式粘貼在一起。

然後，只需從style.textContent中獲取完成的產品，然後獲得合併的樣式表。

作爲普遍可用的枚舉代碼做了實際的困難部分，這對於大多數人來說是一個很好的懶惰夜晚編碼任務，它將完全按照你想要的方式完成工作。

來源

2013-05-11 04:58:24 user784509

將一個類的多個css規則合併到一個類聲明中？

回答

相關問題