CSS功能存在吗？

Question

我不知道该怎么称呼它,但基本上让我说我的风格很多,

.somepattern{
    font-size:16px;
    font-weight:bold;
    border:2px solid red;
}

但有时我想改变它font-size的颜色border.是否可以将此代码视为库,我可以将样式设置为div

<div class="somepattern">Text</div>

但仍然控制着16px和red我们一样的功能吗？

Answer 1

我知道我迟到了,但选择的答案不是正确的答案,因为它将它推迟到CSS预处理器.

回答具体问题"存在CSS功能吗？" ,答案是:是的.

但是,CSS函数的工作方式与OP最初的概念完全不同.

崔希平的回答似乎是最正确的答案.

CSS函数的示例是:

• url()
• attr()
• calc()
• rotate()
• scale()
• linear-gradient()
• sepia()
• grayscale()
• translate()

详细的综合清单可以在这里找到:

MDN上的CSS功能更新了链接8/8/18

WebPlatform.org 404上的CSS函数

Answer 2

您不能以编程方式从您的标记中控制CSS,但您可以使用众多CSS扩展之一来使CSS更像编译语言.

http://lesscss.org/

http://sass-lang.com/

如果我们在LESS中编写您的示例,我们会得到这样的结果:

.somepattern(@color: red, @size: 16px) {
    font-size:@size;
    font-weight:bold;
    border:2px solid @color;
}

然后你可以在你的LESS文件中使用它,如下所示:

.myclass {
    .somepattern(green, 20px);
}

Answer 3

不.没有您需要的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;
}

没有CSS

当然,LESS CSS项目允许您定义变量(并且还有其他糖)并在其他类中使用它们.

LESS通过动态行为扩展CSS,例如变量,mixins,操作和函数.LESS在客户端(IE 6 +,Webkit,Firefox)和服务器端运行,使用Node.js.

如果您的服务器平台是.net,那么还有一个项目DotLessCSS,其中包含.net中的库.还有Phil Haack的T4模板.

请注意,还有许多CSS预处理器/增强器,如LESS CSS:

• 上海社会科学院
• XCSS
• HSS
• CleverCSS

可能还有一些我没有提及的.有些支持嵌套CSS3选择器,有些则不支持.有些是针对特定的服务器端技术,有些则不是.所以明智地选择.