將第三方css實現爲自己較少的結構

Question

如果我想實現一個第三方css，我已經從外部源提供給我自己的較少編譯結構。有沒有可靠的方法來解決這個問題。由於我可以指望外部資源不時更新，我希望儘可能少地進行更改，同時以某種方式將其映射到本地編譯的css中。

例如，如果我的樣式表將按鈕類設置爲「k-button」，而外部css將其設置爲「按鈕」，是否有一種很好的方法使名稱匹配，同時仍確保它們完全分離？

Answer 1

可以儘可能使用extend feature：

以下更少的代碼：

.button { 
background-color: yellow; 
} 
.button-k { 
background-color: red; 
} 

.button:extend(.button-k){} 

輸出：

.button { 
    background-color: yellow; 
} 
.button-k, 
.button { 
    background-color: red; 
} 

導致該.button的background-color現在將red。

在兩個類都沒有設置相同屬性的情況下，你可以嘗試重置不被.button-k定義的值：

.button { 
border: 1px solid white; 
background-color: yellow; 
} 
.button-k { 
border: initial; 
background-color: red; 
} 

.button:extend(.button-k){} 

沒有border: initial;聲明.button類將仍然有一個白色邊框從原始聲明。