是否存在 CSS 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4914533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do CSS functions exist?
提问by zmol
I'm not sure what to call this, but basically let's say I have a style that I use a lot,
我不知道该怎么称呼它，但基本上可以说我有一种我经常使用的风格，
.somepattern{
font-size:16px;
font-weight:bold;
border:2px solid red;
}
but sometime I want to change the font-sizeand the color for border. Is it possible to treat this code as a library, where I can set the style to a div
但有时我想改变font-size和颜色border。是否可以将此代码视为库，我可以在其中将样式设置为 div
<div class="somepattern">Text</div>
but still control the 16pxand redlike we do with functions?
但仍然像我们对函数一样控制16px和red？
回答by Ricardo Zea
I know I'm late to the party but the selected answer IS NOT the right answer since it's deferring it to CSS preprocessors.
我知道我迟到了，但所选的答案不是正确的答案，因为它将它推迟到 CSS 预处理器。
To answer the specific question "Do CSS functions exist?", the answer is: Yes.
回答具体问题“CSS 函数是否存在？” ，答案是：是的。
However, CSS functions work completely different than the OP's concept initially is.
但是，CSS 函数的工作方式与 OP 最初的概念完全不同。
cuixiping's answer seems the most correct answer.
cuixiping 的答案似乎是最正确的答案。
Examples of CSS functions are:
CSS 函数的例子是：
url()attr()calc()rotate()scale()linear-gradient()sepia()grayscale()translate()
url()attr()calc()rotate()scale()linear-gradient()sepia()grayscale()translate()
A detailed, comprehensive list can be found here:
可在此处找到详细、全面的列表：
CSS functions on MDNUpdated link 8/8/18
MDN 上的 CSS 函数更新链接 8/8/18
回答by Dominic
You can't programatically control CSS from your markup, but you can use one of the many CSS extensions to make CSS work more like a compiled language.
您无法通过标记以编程方式控制 CSS，但您可以使用众多 CSS 扩展之一来使 CSS 更像一种编译语言。
If we wrote your example in LESS, we'd get something like this:
如果我们用 LESS 写你的例子，我们会得到这样的东西：
.somepattern(@color: red, @size: 16px) {
font-size:@size;
font-weight:bold;
border:2px solid @color;
}
And then you could use it in your LESS file like so:
然后你可以在你的 LESS 文件中使用它，如下所示：
.myclass {
.somepattern(green, 20px);
}
回答by Robert Koritnik
Nope. No CSS functionality like you require. At least not directly.
不。没有您需要的 CSS 功能。至少不是直接的。
But there are at least two rather generic ways for you to use to accomplish what you need:
但是至少有两种相当通用的方法可以用来完成您的需要：
Class combining
班级合并
You can of course combine as many classes as you like in any element like:
您当然可以在任何元素中组合任意数量的类，例如：
<div class="heading run-in">
Some heading
</div>
Lorem ipsum dolor sit amet...
and you'd have CSS defined as:
并且您将 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
少 CSS
And there is of course LESS CSS projectthat lets you define variables (and has other sugars as well) and use them in other classes.
当然还有LESS CSS 项目可以让您定义变量（也有其他糖）并在其他类中使用它们。
LESS extends CSS with dynamic behavior such as variables, mixins, operationsand functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
LESS 扩展了 CSS 的动态行为，例如变量、mixin、操作和函数。LESS 可以在客户端（IE 6+、Webkit、Firefox）和服务器端使用 Node.js 运行。
If your server platform is .net there's a project DotLessCSSwith a library in .net as well. And there's also T4 templateby Phil Haack.
如果您的服务器平台是 .net，则还有一个项目DotLessCSS和 .net 中的库。还有Phil Haack 的T4 模板。
Mind that there are many CSS preprocessors/enhancers like LESS CSS as well:
请注意，还有许多 CSS 预处理器/增强器，例如 LESS CSS：
And probably some others that I didn't mention. Some support nesting CSS3 selectors as well others don't. Some are aimed at particular server-side technology some don't. So choose wisely.
可能还有一些我没有提到的。有些支持嵌套 CSS3 选择器，有些则不支持。有些针对特定的服务器端技术，有些则没有。所以要明智地选择。
回答by Alexey Kruchenok
you can redefine style by adding the style tag to your HTML:
您可以通过将样式标记添加到 HTML 来重新定义样式：
<div class="somepattern" style="font-size:5px">Text</div>
or by applying multiple classes like class="somepattern small".
或者通过应用多个类，如 class="somepattern small"。
HTML
HTML
<div class="somepattern small"> Text </div>
CSS
CSS
.small {
font-size:5px;
}
the smallclass will be applied after the somepatternclass and will therefore override any properties set in the some patternclass.
small该类将在该类之后应用，somepattern因此将覆盖some pattern该类中设置的任何属性。
回答by pavanred
its a css class. It cannot be used like functions if that's what you are asking. There is no code library as its not a compiled. CSS is just presentation semantics (formatting) of a document written in a markup language. You can include all css classes in a .css file and use it where ever you want instead.
它是一个 css 类。如果这是您的要求，则不能像函数一样使用它。没有代码库，因为它不是编译的。CSS 只是用标记语言编写的文档的表示语义（格式）。您可以将所有 css 类包含在 .css 文件中，并在您想要的任何地方使用它。
回答by mrbenbot
Even later to the party!
更晚的聚会！
You can now do this with css custom variables.
您现在可以使用css 自定义变量来执行此操作。
In our css using the var()function:
在我们的 css 中使用var()函数：
.some-pattern {
font-size: var(--font-size);
font-weight: bold;
border: var(--border);
}
Then in our html defining the custom variables inline:
然后在我们的 html 中定义内联自定义变量：
<div
class="some-pattern"
style="--border: 3px double red; --font-size: 16px;"
>
test
</div>
回答by Al Kepp
What you described is actually done with styleattribute.
你所描述的实际上是用style属性完成的。
<div class="somepattern" style="font-size:10px;">Text</div>
I think this is exactly what you want. And it is not recommended, because it breaks the usual (good) pattern of spitting content and its visual style. (Although, honestly, I do use it a lot. ;-))
我认为这正是你想要的。并且不推荐这样做，因为它打破了通常的（好的）吐痰内容模式及其视觉风格。（虽然，老实说，我确实经常使用它。;-)）
回答by Flying Swissman
I've come to realize through the comments of others that this solution overcomplicates the problem at hand. This solution works but there are easier and better alternatives that do not depend on server-side scripting.
我已经通过其他人的评论意识到这个解决方案使手头的问题过于复杂。此解决方案有效，但有更简单、更好的替代方案，不依赖于服务器端脚本。
You can actually control your stylesheet if you make it a php file stylesheet.php?fontsize=16and then inside your stylesheet you can retrieve the variable
如果你把它变成一个 php 文件stylesheet.php?fontsize=16，你实际上可以控制你的样式表，然后在你的样式表中你可以检索变量
<?php
header("Content-type: text/css");
$fontsize=16;
?>
.somepattern{
font-size: $fontsize;
font-weight:bold;
border:2px solid red;
}
回答by Armin
Do you mean inline styles ? <div class="somepattern" style="border-color:green">Text</div>
你的意思是内联样式？ <div class="somepattern" style="border-color:green">Text</div>
