Using variables

Asked

Viewed 54 times

1

I had my eye on the use of variables in CSS, like below, simple stuff, so far so good. Then I saw that I could incorporate 'functions', but I only saw the use of libs as lesscss and Sass.

You can define a function in the CSS - like the last 2 examples - without having to use installed libs?

It would make it easier to maintain the style sheet rather than having to define several classes to the 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();
}
css html5 css3
  • 1

    I don’t know functions that do this, just with Less or Sass.. some CSS functions: W3schools CSS Functions

  • 1

    I recommend using LESS or SASS with Visual Studio Code editor, there is a plugin (easy Less) that when saving your LESS file already generates CSS in the same directory

  • @Well thanks, I’ll take a look to see.

  • 1

    Dude I think this will interest you https://answall.com/questions/298995/o-que-significa-specified-no-root-do-css-do-bootstrap/298998#298998 da da para fazer muito coisa com variável

1 answer

3


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 a CSS code.

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

  • In the variables I can only have :root { --preto:#000 } and I can’t use a list like :root { font-size:10; border:#000 2px solid }, right?

  • 1

    @Certain Papacharlie, you can only define the value of a property in each variable; it is not possible to define the font and border style with the same, for example. However, have --border: #000 2px solid and border: var(--border) is something completely valid and functional.

  • The libs code is compiled by javascript?

  • 1

    It varies according to the tool. SASS uses Ruby (there is Gulp Sass that is in Node), LESS uses Node, which is Javascript, including with the option of compile right in the browser (in development environment). Compass also uses Ruby. Stylus also uses Node.

Browser other questions tagged css html5 css3

You are not signed in. Login or sign up in order to post.