Do CSS functions exist?

Question

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


        

Answer 1

What you described is actually done with style attribute.

<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. ;-))

Answer 2

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.

To answer the specific question "Do CSS functions exist?", the answer is: Yes.

However, CSS functions work completely different than the OP's concept initially is.

cuixiping's answer seems the most correct answer.

Examples of CSS functions are:

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

A detailed, comprehensive list can be found here:

CSS functions on MDN Updated link 8/8/18

Answer 3

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