Do CSS functions exist?

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

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 18/9/20

Tags:

Css

Recent Posts