需要創建css皮膚（使用擴展）

我必須創建一個WP主題的皮膚，所以我需要將具有相似屬性的所有選擇器組合在一起（例如「顏色」）。需要創建css皮膚（使用擴展）

任何意見如何創建一個類似CSS皮膚少用？我結束了這種解決方案

h1, h2, h3, h4, h5, h6{ 
    &:extend(.heading-color); 
    font-size: 12px; 
} 

.another-selector{ 
    &:extend(.heading-color); 
    font-size: 24px; 
} 

.heading-color{ 
     color: red; 
}

此輸出：

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-size: 12px; 
} 
.another-selector { 
    font-size: 24px; 
} 
.heading-color, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.another-selector { 
    color: red; 
}

這完美的作品，只是我需要創建一個「假」類「.heading色」。這是一個很好的方法，或者我失去了一些東西？

來源

2014-08-27 Dee

對於這種情況，您可能甚至不需要擴展。它可以像[this]一樣完成（http://codepen.io/hari_shanx/pen/ngsDH）。請注意，這不會在CSS輸出中創建任何額外的類。 – Harry 2014-08-27 09:56:44

是的，當然，但我首先需要的是一個單極屬性來對所有類似的選擇器進行分組，在我的示例中，我只有按時重複「顏色：紅色」。使用CMS等更容易覆蓋。 – Dee 2014-08-27 10:23:21

我懷疑這樣的膨脹結果是否值得「用CMS覆蓋」（因此，如果最初需要3個類和99個屬性，您必須生成99個選擇器組？）還應該有其他方法來執行此操作（但這一切都取決於你的意思是「重寫CMS」）。無論哪種方式，都可以通過將這些虛擬類移動到用['reference']（http://lesscss.org/features/#import-options-reference）選項導入的單獨文件中來消除這些虛擬類。見[例如]（https://github.com/seven-phases-max/less.curious/blob/master/articles/rbgi.md#method-3-emulating-1177） – 2014-08-27 11:33:37

您可以在單獨的.less文件中編寫您的「假類」，然後使用@import (reference)。

fake.less：

.fake { 
    color: red; 
}

real.less：

@import (reference) "fake.less"; 

.real { 
    &:extend(.fake); 
}

real.css：

.real { 
    color: red; 
}

薩斯支持佔位這是在這種更加得心應手場景。較少的貢獻者已考慮實施類似的功能（高優先級，請參閱https://github.com/less/less.js/issues/1177）一年以上......所以我認爲上述解決方法可能對您有所幫助。

來源

2014-12-01 08:57:45 Justineo

需要創建css皮膚（使用擴展）

回答

相關問題