我不知道该怎么称呼它，但基本上可以说我有一种我经常使用的风格，
.somepattern{
font-size:16px;
font-weight:bold;
border:2px solid red;
}
但有时我想更改font-size 和border 的颜色。是否可以将此代码视为一个库，我可以在其中将样式设置为 div
<div class="somepattern">Text</div>
但仍然像我们使用函数一样控制16px 和red？
【问题讨论】：
标签： css
我知道我迟到了，但选择的答案不是正确的答案，因为它将它推迟到 CSS 预处理器。
回答具体问题“CSS 函数存在吗？”，答案是：是的。
但是，CSS 函数的工作方式与 OP 最初的概念完全不同。
翠西平的答案似乎是最正确的答案。
CSS 函数示例如下：
url()attr()calc()rotate()scale()linear-gradient()sepia()grayscale()translate()可以在此处找到详细、全面的列表：
CSS functions on MDN 更新链接 18/9/20
【讨论】：
您无法通过标记以编程方式控制 CSS，但您可以使用众多 CSS 扩展中的一种来使 CSS 更像一种编译语言。
如果我们用 LESS 编写您的示例，我们会得到如下内容：
.somepattern(@color: red, @size: 16px) {
font-size:@size;
font-weight:bold;
border:2px solid @color;
}
然后你可以像这样在你的LESS文件中使用它：
.myclass {
.somepattern(green, 20px);
}
【讨论】：
enum generation
不。没有您需要的 CSS 功能。至少不是直接的。
但至少有两种相当通用的方法供您使用来完成您需要的事情：
您当然可以在任何元素中组合任意数量的类，例如：
<div class="heading run-in">
Some heading
</div>
Lorem ipsum dolor sit amet...
你的 CSS 定义为：
.heading {
color: #999;
font-size: 16pt;
font-weight: bold;
border-bottom: 2px solid red;
display: block;
margin: 1.5em 0 .5em;
}
.run-in {
display: inline;
margin: 0;
font-size: 1em;
}
当然还有LESS CSS project 可以让您定义变量（并且还有其他糖）并在其他类中使用它们。
LESS 使用 变量、mixins、操作和函数等动态行为扩展了 CSS。 LESS 使用 Node.js 在客户端（IE 6+、Webkit、Firefox）和服务器端运行。
如果您的服务器平台是 .net，那么有一个项目 DotLessCSS 也有一个 .net 中的库。还有 Phil Haack 的 T4 template。
请注意，还有许多 CSS 预处理器/增强器，例如 LESS CSS：
也许还有一些我没有提到的。有些支持嵌套 CSS3 选择器，有些则不支持。有些针对特定的服务器端技术，有些则不针对。所以要明智地选择。
【讨论】：
.red 或 .size16 类。 CSS 类必须是语义的，即按其语义目的命名，而不是按实现命名。虽然我确定我只是用它作为示例，但这个非常危险，因为许多初学者会在他们的 css 代码中直接使用它。
您可以通过将样式标签添加到 HTML 来重新定义样式：
<div class="somepattern" style="font-size:5px">Text</div>
或通过应用多个类，如 class="somepattern small"。
HTML
<div class="somepattern small"> Text </div>
CSS
.small {
font-size:5px;
}
small 类将在somepattern 类之后应用，因此将覆盖some pattern 类中设置的任何属性。
【讨论】：
您所描述的实际上是使用style 属性完成的。
<div class="somepattern" style="font-size:10px;">Text</div>
我认为这正是您想要的。并且不推荐，因为它打破了通常的（好的）吐出内容的模式及其视觉风格。 （虽然，老实说，我确实经常使用它。;-)）
【讨论】：
.size16 之类的类，那么这些不是语义类，所以他们没有比直接使用 style 属性更好的方式。
它是一个 CSS 类。如果您要问的是，它不能像函数一样使用。没有代码库，因为它不是编译的。 CSS 只是用标记语言编写的文档的表示语义（格式）。您可以在 .css 文件中包含所有 css 类，并在任何您想要的地方使用它。
【讨论】：
我通过其他人的 cmets 认识到这种解决方案使手头的问题过于复杂。此解决方案有效，但有更简单更好的替代方案，不依赖于服务器端脚本。
如果您将样式表设为 php 文件 stylesheet.php?fontsize=16，您实际上可以控制您的样式表，然后您可以在样式表中检索变量
<?php
header("Content-type: text/css");
$fontsize=16;
?>
.somepattern{
font-size: $fontsize;
font-weight:bold;
border:2px solid red;
}
【讨论】：
晚会！
您现在可以使用css custom variables 执行此操作。
在我们的css中使用var()函数：
.some-pattern {
font-size: var(--font-size);
font-weight: bold;
border: var(--border);
}
然后在我们的 html 中内联定义自定义变量：
<div
class="some-pattern"
style="--border: 3px double red; --font-size: 16px;"
>
test
</div>
【讨论】：
class="some-pattern red" 和.red { --border: 3px double red }
是的，这是可能的。但是你必须在 Recatjs 的帮助下自己完成它（你不必更深入，基本就足够了）。其实这样想 如果bootstrap可以做这样的事情，我们只需要定义类名，它会自动设计HTML文件，那为什么我们做不到呢。
这是我的代码图片(https://i.stack.imgur.com/hyePO.png)
这就是我在 jsx 代码中使用它的方式 (https://i.stack.imgur.com/yK6VD.jpg)
【讨论】：
你的意思是内联样式吗？ <div class="somepattern" style="border-color:green">Text</div>
【讨论】：