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

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.

Answer 2

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>

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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