避免CSS中的重复常量

有没有什么有用的技术可以减少CSS文件中常量的重复

---

（例如，一组不同的选择器应该应用相同的颜色或相同的字体大小）？

您可以在html元素中使用多重继承（例如，

），但我不知道在CSS文件中使用常量的方法

这个链接（在谷歌搜索你的问题时第一次发现）似乎对这个问题有相当深入的了解：

---

您应该用逗号分隔每个id或类，例如：

h1，h2{
颜色：#fff；
}

据我所知，如果不以编程方式生成CSS文件，就无法在一个且仅在一个点上定义您最喜欢的蓝色（#E0EAF1）

你可以很容易地编写一个计算机程序来生成文件。执行一个简单的查找和替换操作，然后另存为.css文件

从这个源代码开始。css

h1，h2{
颜色：%%YOURFAVORITECOLOR%%；
}
什么{
边框颜色：%%YOURFAVORITECOLOR%%；
}

到这个target.css

h1，h2{
颜色：#E0EAF1；
}
什么{
边框颜色：#E0EAF1；
}

有这样的代码…（VB.NET）

---

元素可以属于多个类，因此可以执行以下操作：

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

然后在内容部分的某个地方：

<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>

您的内容

这里的缺点是，它在身体里变得非常冗长，你不可能把它归结为只列出一种颜色。但是你可能只能做两三次，你可以把这些颜色组合在一起，也许在它们自己的表格里。现在，当你想改变配色方案时，它们都在一起，改变非常简单

---

但是，是的，我对CSS最大的抱怨是无法定义自己的常量。

就我个人而言，我只是使用逗号分隔选择器，但是有一些解决方案可以通过编程编写CSS。对于您更简单的需求来说，这可能有点过分了，但是看看（Python）

，如果它在所有主要浏览器中都实现，总有一天会解决这个问题

---

在此之前，你要么复制粘贴，要么像其他人建议的那样使用任何类型的预处理器（通常使用服务器端脚本）。

你可以使用动态css框架，比如。

你可以使用全局变量来避免重复

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

在这里，您可以在根伪类选择器中初始化全局变量：根是DOM的顶级

:root{
    --main--color: #ccc; 
}

p{
  background-color: var(--main-color);
}

h1{
  background-color: var(--main-color);
}

注：这是一项实验技术 因为这项技术的规范还没有稳定下来，所以请检查兼容性表，以便在各种浏览器中使用正确的前缀。还请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化

但是，您可以始终使用语法上非常棒的样式表，即

在Sass情况下，必须在顶部使用$variable\u name来初始化全局变量

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

---

尝试全局变量以避免重复编码

h1{
颜色：红色；
}
p{
字体大小：粗体；
}

或者您可以创建不同的类

.deflt color{
颜色：绿色；
}
.dflt nrml字体{
字体大小：12px；
}
.dflt标题字体{
字号：18px；
}

最近，官方CSS规范

变量允许您这样做：

body，html{
保证金：0；
身高：100%；
}
.主题默认值{
--页面背景色：#cec；
--页面颜色：#333；
--按钮边框宽度：1px；
--按钮边框颜色：#333；
--按钮背景色：#f55；
--按钮颜色：#fff；
--排水沟宽度：1米；
浮动：左；
身高：100%；
宽度：100%；
背景色：var（--页面背景色）；
颜色：var（--页面颜色）；
}
钮扣{
背景色：var（--按钮背景色）；
颜色：var（--按钮颜色）；
边框颜色：var（--按钮边框颜色）；
边框宽度：var（--按钮边框宽度）；
}
.pad盒{
填充：var（--槽宽）；
}

这是一个测试

主题按钮

>“但是，是的，我对CSS最大的抱怨是无法定义自己的常量。”。我也没有错过任何基本的算术计算和if条件。我希望能够说“宽度：100%-10px”@Hoffmann[一段时间后]繁荣，现在（很快）我们有了

calc（）

：-）@VictorZamanian如果所有主流浏览器都支持它，我会非常高兴。好奇的是，这里有一些文档：啊，如果没有一些疯狂，它永远不可能成为CSS规范的一部分：“注意：+和-运算符必须始终被空格包围。例如，calc（50%-8px）的操作数将被解析为一个百分比，后跟一个负长度，这是一个无效的表达式，而calc（50%-8px）的操作数是一个百分比，后跟一个减号和一个长度。“@VictorZamanian是的，当然，C在编译时会进行这种解析，所以不会影响性能。CSS需要动态解析，所以我想这可能是他们的深思熟虑。无论如何，我对calc（）也很满意，但我想知道我们是否能够说：“width:calc（100%-右边框-左边框）”例如，从mozilla网站上看，我们似乎无法做到。如果你仍然使用堆栈溢出，你可能想更新接受的答案，现在CSS有变量了！这很简单，但很有用。建议将CSS自定义属性（又名变量）定义放入

：root{}

选择器中，以免破坏不了解变量的解析器。@VolkerE。自定义属性/变量的定义与任何其他属性一样。它们需要放在选择器中。如果要全局应用，可以是

：root

，但也可以是任何其他选择器。不支持自定义属性/变量的浏览器（应该）忽略这些属性，因为

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    } 

<p> some red text </p>

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim(); 


document.documentElement.style.setProperty('--primary-color', 'blue');