Do CSS functions exist?

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, w开发者_高级运维here 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?

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

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

Nope. No CSS functionality like you require. At least not directly.

But there are at least two rather generic ways for you to use to accomplish what you need:

Class combining

You can of course combine as many classes as you like in any element like:

<div class="heading run-in">
    Some heading
</div>
Lorem ipsum dolor sit amet...

and you'd have CSS defined as:

.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

And there is of course LESS CSS project that lets you define variables (and has other sugars as well) and use them in other classes.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

If your server platform is .net there's a project DotLessCSS with a library in .net as well. And there's also T4 template by Phil Haack.

Mind that there are many CSS preprocessors/enhancers like LESS CSS as well:

• SASS
• xCSS
• HSS
• CleverCSS

And probably some others that I didn't mention. Some support nesting CSS3 selectors as well others don't. Some are aimed at particular server-side technology some don't. So choose wisely.

you can redefine style by adding the style tag to your HTML:

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

or by applying multiple classes like class="somepattern small".

HTML

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

CSS

.small {
font-size:5px;
}

the small class will be applied after the somepattern class and will therefore override any properties set in the some pattern class.

Even later to the party!

You can now do this with css custom variables.

In our css using the var() function:

.some-pattern {
    font-size: var(--font-size);
    font-weight: bold;
    border: var(--border);
  }

Then in our html defining the custom variables inline:

<div
  class="some-pattern"
  style="--border: 3px double red; --font-size: 16px;"
>
  test
</div>

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

its a css class. It cannot be used like functions if that's what you are asking. There is no code library as its not a compiled. CSS is just presentation semantics (formatting) of a document written in a markup language. You can include all css classes in a .css file and use it where ever you want instead.

I've come to realize through the comments of others that this solution overcomplicates the problem at hand. This solution works but there are easier and better alternatives that do not depend on server-side scripting.

You can actually control your stylesheet if you make it a php file stylesheet.php?fontsize=16 and then inside your stylesheet you can retrieve the variable

  <?php
     header("Content-type: text/css");
     $fontsize=16;
  ?>

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

Yes, it's possible. But you have to make it on your own with the help of Recatjs(u don't have to go deeper, basic is enough for this). Actually, think like that If bootstrap can make such things where we just have to define the class name and it automatically designes HTML files, then why we cannot do it.

Here's the image of my code(https://i.stack.imgur.com/hyePO.png)

and this is how I used it in my jsx code (https://i.stack.imgur.com/yK6VD.jpg)

Do you mean inline styles ? <div class="somepattern" style="border-color:green">Text</div>