What does the "--" specified in the Bootstrap CSS :root mean?

Asked

Viewed 1,643 times

11

It’s just a question that came up when I was snooping the CSS of Bootstrap, this is something I don’t know and I didn’t find any answer in Google about it...

There’s an excerpt from the code:

    :root {
      --blue: #007bff;
      --indigo: #6610f2;
      --purple: #6f42c1;
      --pink: #e83e8c;
      ...

What the -- before blue and others means exactly?

css css3 twitter-bootstrap

1 answer

20


The :root CSS pseudo-class represents the root element of the tree document. Applied to HTML, :root represents the element <html> and is identical to the html selector, except that its specificity is higher.

In the case of Bootstrap no :root they declare some global variables for the document, such as the Typography the color palette and the breakpoint

About the "--" see what the official W3C documentation says:

A custom Property is any Property Whose name Starts with two Dashes (U+002D HYPHEN-MINUS) , like --foo.

That is, it is the property that begins with two strokes --

Link to the W3C documentation on custom Property https://www.w3.org/TR/css-variables-1/#Defining-variables

Those colors like --blue:#007bff; are actually CSS-Variables, so as it declares in :root that the color --blue is of value #007bff, then he can put in a text color:var(--blue) and he will actually take the value #007bff

The cool of the variables is that you can use it in any elements and then easily change the theme of the entire site only by changing the value that is in the variable, is like a CSS within the CSS, changing the value of the global variable that is in the :root you exchange the entire site, can be a color, font-family, etc...

See the example below to see how it works. In it I declared that --azul is blue, but if I change blue for red all elements with variable --azul stay red.

OBS: in the example below the value #0f0 is a fallback if the browser does not support the variable --azul, so it will use the color that comes after the comma (green).

Note that I used the variable var(--azul) both to determine the color font as well as color background-color. 

:root {
  --azul: blue;
}
p {
  color: var(--azul);
}
div {
  width: 100px;
  height: 100px;
  background-color: var(--azul, #0f0);
}
/* repare que a variável --azullll não existe e o fallback é #0f0 então ela fica verde*/
div:nth-of-type(2) {
  background-color: var(--azullll, #0f0);
}
<p>Lorem Ipsum</p>
<div></div>
<div></div>

TIP:

Another option to use. Now instead of declaring the value of the property in variable form I will declare the property as a variable, and when I use it in element style I just change with the value I want.

First I set a variable on the universal dial * {} and then called the value --mb: Npx of it directly in the element. Thus in any element that you put --mb + valor you’ll be giving a margin-bottom of value size

* {
  margin-bottom: var(--mb, initial);
}
.item1 {
    --mb: 20px;
    background: red;
}
.item2, .item3 {
   --mb: 40px;
   background: blue;
}
.item3 {
   background: green;
}
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="">item4</div>

OBS: The initial in this case is the fallback , then if you don’t set the variable in some element the value initial is worth avoiding unwanted side effects.

You can read more in the official Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/var

See here the browser support for css-variables, see that it is widely accepted, and for the IE that does not accept is worth the fallback value after the comma https://caniuse.com/#feat=css-variables

Everything you put of style in :root is valid for the whole document, but in some cases you can use other selectors such as the universal selector * . If you put there font-size:20px for example, this value will be the default for all the text you write in the document.

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

Full root of Bootstrap 4

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  ...
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

See that besides the colors they also declare the Typography etc. If you want to use the Google Fonte just change the --font-family there and ready, your whole site will have a new global font.

  • thought it was not possible to create variables in css, only in Less, Sass, etc... thanks for the lesson...

  • @Samuelmota Yes the variables are a powerful resource and very well accepted by modern browsers, except for IE, but for it is worth the fallback, that [and the value after the comma as I explained above. See browser support for the https://caniuse.com/#feat=css-variables property

Browser other questions tagged css css3 twitter-bootstrap

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