CSS Variables –
CSS variables can access DOM(Document Object Model). They can be created with local and global scope. var() function is used to create CSS variables. CSS variables are created using following syntax:
var(name, value)
CSS variables with global scope are created by declaring them inside :root.
CSS variables with local scope are created by declaring them inside selector which will be using it.
Advantages of using CSS variables are, that they make the code easy to read and easy to change color values. CSS variables can be changed as following:
- You can override them
- You can change them with Javascript
- You can change them inside Media Queries
By using CSS variables, you can customize Bootstrap easily, and without using CSS preprocessor. The power of Sass is there behind the scenes, but CSS variables add more power for the future. CSS variables allow us to Use and compose new values, updates styles globally without recompiling, set fallback values, setup new color modes, and more.
For Free, Demo classes Call: 8237077325
Registration Link: Click Here!
Bootstrap 5 added CSS variables across the root level and all components.
CSS Variables:- The official name of CSS variables is custom properties. CSS variables allow us to name frequently used values.
e.g. Suppose you want to use a particular color many times the instead of writing its hexadecimal value every time you can create a variable of that color and use that variable with var( ) function.
:root
{
–purple:6f42c1;
}
.var
{
color: var(–purple);
}
Like this we can set many property values globally in bootstrap using CSS variables.
Group of Variables:- Following group of CSS variables are used in Bootstrap.
- Root variables:- The variables which are available on root element can be accessed by any element throughout DOM because they are globally scoped variables.
- Component variables:– These variables are available for specific component so their scope is local. These variables are available on components base class, their modifier class and their Saas mixins.
- Utility variables:– These variables are used as modifiers within other utility classes.
All CSS variables are prefixed with –bs-. There is no need to put all component classes at root level.
Root variables:- There are many root variables available in Bootstrap. Following are some of them:
- Colors:- All colors which can be specified by names, gray colors and theme colors which includes all theme colors in their rgb format.
- Body font styles:– Every font property from font-size, color, style and more can be applied to <body> element.
- Shared properties:- Some theme specific properties can be used with number of elements like colors and borders.
Root CSS variables are used with other parts of Bootstrap to allow you to override default styles at global level. If you don’t want to use CSS variables you have to use preprocessor like Saas or write new selectors.
e.g. Suppose you want to adjust border-radius and link color of any specific component you override two variables instead of writing new selectors.
:root
{
–bs-border-radius:.5rem;
–bs-link-color:#333;
}
You can override these values by using following method:
:root
{
–bs-border-radius:var(–bs-border-radius-lg);
–bs-link-color:var(–bs-gray-800);
}
For Free, Demo classes Call: 8237077325
Registration Link: Click Here!
Component Variables:- In Bootstrap components CSS variables has more power of customizing. All the components like Accordion, Alerts, Badge, Buttons etc excluding Scrollspy and Close button have relevant class variables. There are many CSS variables which can be used with Bootstrap components.
e.g. You can add classes to the bootstrap components like Tooltips and popovers using data-bs-custom-class=”custom-tooltip”. Then by using CSS variables you can change the tooltip background and arrow color like:
.custom-tooltip
{
–bs-tootip-bg:var(–bs-primary);
}
Utility Variables:- Every utility class does not use CSS variables but if they use CSS variables then they will get good amount of power and customization. Background, border and color utilities have CSS variables to improve their usefulness. These utilities use CSS variables to customize the transparency of
rgba( ) colors.
e.g <div class=”p-3 bg-success bg-opacity-25”>
—–
</div>
Background color utility .bg-* by default has local variable –bs-bg-opacity with default value 1. You can change the default value with your own style or by using new .bg-opacity-* utility. Same classes are available for border color opacity and text color opacity.
For Free, Demo classes Call: 8237077325
Registration Link: Click Here!
For border color opacity –bs-border-opacity and .border-opacity-* classes are used and for text color opacity –bs-text-opacity and .text-opacity-* classes are used. Many color options are available for these color utilities.
Author:
| SevenMentor Pvt Ltd.
© Copyright 2021 | Sevenmentor Pvt Ltd.