是否存在CSS功能？ [英] Do CSS functions exist?

问题描述

我不知道该说什么，但基本上我说我有一个很多使用的风格，

  .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工作更像是编译语言。

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

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-size and the color for border. Is it possible to treat this code as a library, where I can set the style to a div

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

but still control the 16px and red like we do with functions?

解决方案

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.

http://lesscss.org/

http://sass-lang.com/

If we wrote your example in LESS, we'd get something like this:

.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:

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

这篇关于是否存在CSS功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！