避免在CSS中重复使用常量

是否有任何有用的技术可以减少CSS文件中常量的重复？

(例如,一堆不同的选择器应该都应用相同的颜色,或相同的字体大小)？

最近,变量已被添加到官方CSS规范中.

变量允许你这样的事情:

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

    

        

            This is a test
        
        
           Themed button
        
    

h1,h2 {
  color: #fff;
}

.DefaultBackColor
{
    background-color: #123456;
}
.SomeOtherStyle
{
    //other stuff here
}
.DefaultForeColor
{
    color:#654321;
}

Your content