Using variables

Question

Using variables

Navigation

#1 by (3 votes)

1

I was looking at the use of variables in CSS, as below, simple thing, so far so good. Then I saw that I could incorporate 'functions', but I only saw it using libs like lesscss and sass .

Is it possible to define a function in CSS - like the last 2 examples - without having to resort to the installed libs?

It would make it easier to maintain the style sheet than to have to define several classes to elements, type <div class="azul borda maiusculo">Lorem ipsum</div> .

:root {
  --preto:#000;
  --cinza:#999;
}

h1{color:var(--preto)}
h2{color:var(--cinza)}


<h1>Lorem ipsum</h1>
<h2>Lorem ipsum</h2>

.classH1(@color: red, @size: 16px){
    font-size:@size;
    border:@color 2px solid;
}

h1{
    .classH1(green, 20px);
}

.classH1(){
    font-size:10;
    border:#000 2px solid;
}

h1{
    .classH1();
}

html5 css css3

asked by anonymous 25.04.2017 / 21:17

1 answer

Validate JDateChooser How to stylize elements that already contain predefined bootstrap class styles? [duplicate]

score 3 · Accepted Answer

The concept of functions already exists in CSS, but not in the way you want. The functions that can be used are native to the language and there is no way to define new ones without the use of auxiliary languages, such as SASS and LESS, which when compiled generate CSS code.

The list of native CSS functions so far can be found here [1] (unofficial source) , with interesting documentation for each.

[1] link