It's just a question that came up when you snooped the bootstrap css, this is something I do not know and I did not find the answer on google about it ...
goes a piece of code:
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
...
What does the "-" before blue and the other mean exactly?
The
:rootCSS pseudo-class represents the root element of the document. Applied to HTML,: root represents the<html>element and is identical to the html selector, except that its specificity is higher.
In the case of Bootstrap in :root they declare some global variables for the document, such as Color Palette Typography and Breakpoint
About "-" 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.
This is the property that starts with two strokes -
W3C documentation link on custom property link
These colors as --blue:#007bff; are actually CSS-Variables, so as it declares in the: root that the color --blue has the value #007bff , then it can put in a text color:var(--blue) and it actually will get the value #007bff
The legal variable is that you can use it in any element and then easily change the theme of the entire site only by changing the value that is in the variable, it is like a CSS inside the CSS, changing the value of the global variable that is in :root you change the whole site, being a color, font-family, etc ...
See the example below to see how it works. I have declared that --azul is blue , but if I change blue to red all elements with --azul become red .
OBS: In the example below the value #0f0 is a fallback if the browser does not support the --azul variable, so it will use the next color after the comma (green).
Notice that I used the variable var(--azul) to determine the color of the font as well as the color of 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 property value in a variable way I'm going to declare the property as a variable, and when I use it in the element style I just change the value I want.
I first set a variable in the universal selector * {} and then called the value --mb: Npx of it directly in the element. This way in any element that you put --mb + valor you will be giving a margin-bottom of the size of the value
* {
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 fallback , so if you do not 7 the variable in some element the value initial is valid avoiding unwanted side effects .
You can read more in the official Mozilla documentation: link
See the support for browsers at css-variables , see that it is widely accepted, and for IE that does not accept the fallback value after the comma link
Everything you put 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 font-size:20px there, for example, this value will default to all the text you write in the document.
Full Bootstrap 4 Root
: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 beyond the colors they declare the Typography etc. If you want to use Google Source just change the --font-family there and that's it, your whole site will have a new global font.