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预处理器。

要回答具体问题＆＃34;是否存在CSS功能？＆＃34; ，答案是：是。

然而，CSS功能与OP的概念完全不同。

崔立平的答案似乎是最正确的答案。

CSS功能的例子是：

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

详细，全面的清单可以在这里找到：

CSS functions on MDN更新了链接8/8/18

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;
}

LESS CSS

当然LESS CSS project允许您定义变量（并且还有其他糖）并在其他类中使用它们。

LESS通过动态行为扩展CSS，例如变量， mixins ，操作和功能。 LESS在客户端（IE 6 +，Webkit，Firefox）和服务器端运行，使用Node.js。

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

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

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

Answer 4

您可以通过在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类中设置的任何属性。

Answer 5

您所描述的内容实际上是使用style属性完成的。

<div class="somepattern" style="font-size:10px;">Text</div>

我认为这正是你想要的。并且不建议这样做，因为它打破了通常（好）吐痰内容及其视觉风格的模式。（虽然老实说，我确实使用了很多。; - ））

Answer 6

它是一个css类。如果这就是你所要求的，它不能像函数一样使用。没有代码库，因为它不是编译的。 CSS只是用标记语言编写的文档的表示语义（格式化）。您可以在.css文件中包含所有css类，并在任何您想要的地方使用它。

Answer 7

甚至晚于聚会！

您现在可以使用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>

Answer 8

是的，这是可能的。但是你必须在 Recatjs 的帮助下自己制作它（你不必更深入，基本就足够了）。其实就是这么想，如果bootstrap可以做到这样的事情，我们只需要定义类名，它会自动设计HTML文件，那为什么我们不能这样做。

这是我的代码图片(https://i.stack.imgur.com/hyePO.png)

这就是我在我的 jsx 代码中使用它的方式 (https://i.stack.imgur.com/yK6VD.jpg)

Answer 9

你的意思是内联样式吗？ <div class="somepattern" style="border-color:green">Text</div>

Answer 10

我已经通过其他人的评论意识到这个解决方案使手头的问题过于复杂。此解决方案有效，但有更简单，更好的替代方案，不依赖于服务器端脚本。

如果您将样式表设为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功能存在吗？

10 个答案:

类合并

LESS CSS