Blog

Blog

<< Home page

Variables in CSS.

Jalə Mirzəyeva

13.09.2021

In this article, we will try to understand what variables are, their purpose in declaring and defining variables, and other related topics.

So let's start. Previously, it was necessary to use pre-processors such as ‘Sass - Less’ to define variables. But now we can do it only in CSS.

The main purpose of defining variables is to prevent duplicate codes. It is possible to write more optimized code using them. For example, color code, font code, etc. used in many places on a website. In the future, when you change the template of a website, it will be very difficult to come one by one to the designated places to change these colors or fonts. Instead, it is easier and more convenient to create a variable called color and assign a color code to it.

Now let's learn how to declare variables in CSS;

You start naming variable names with 2 hyphens, then write the name of the variable and assign it a value:

detail {
--variable-name: variable-value;
}

We set the variable. Now let's look at the structure we're going to write to call the variable we define:

property: var (- variable-name);

Var () is used to access the keyword variable.

After learning the structure, let's take another look at the code example to better understand it;

Defining a variable:

1 ::root{
2 --white : #ffffff;
3 --red : #b00;
4 --grey : #ddd;
5 }

Calling a variable:

input [name="user_name"]{

background-color: var(--red);

color:var(--white);

border : 1px solid var(--gray);

}

Aspects to consider when determining a variable;

When using variables, pay attention to the spelling. So the number after the 2 tireds written in front of you during the naming, you can not use any sign!

/* Yanlış adlandırma*/element{

--123deyisen : 1px ;

--#deyisen : 1rem ;

--$deyisen :1rem ;

}

/* Doğru adlandırma*/element{

--deyisen:1rem;

--deyisen-adi : #fff;

}

Finally, let me note that the variables in CSS are Case Sensitive. That is, there is a lowercase/uppercase letter sensitivity.

                                                       . . .

NOTE:

: A variable defined within the root is valid in all Html, a variable defined within any #section {} is valid only within that #section.

/* CSS */

:root{

       --color: red;

}#section{

        --color: blue;

}p{

--color: black;

}

The color of this div is red!

The color of this div is blue!

The color of this p is blue! This is the parent #section.

The color of this p is black!

You can use the same variable name with different values in different fields. - For example, in the example above —- the color variable was used in several different fields with different values: root, #section, p.

                                                              . . .

The structure is slightly different for values used in units such as px :

:root{

      --space: 10;

}.box{

       padding: var(--space)px;

}❌ This entry is not valid..box{

                 padding: calc(var(--space) * 1px);

}

✔️ can be made valid by using the calc () function.

CSS variables and Javascript;

With JavaScript, you can access, read, and modify CSS variables.

 

const box = document.querySelector('.box');

const boxStyles = getComputedStyle(box);

const boxColor = boxStyles.getPropertyValue(--box-color);

boxColor.style.setProperty('--box-color', #ccc);

Support in browsers;

NOTE:

For non-supported browsers, you can use support () to make it usable.

@support(--color: red){
              header{
                  background: --color;
                 }
            }

 

 

 

Ən çox oxunanlar

Logo

Logos are perhaps as vital and crucial to a brand or company's marketing success as appearance is at the first meeting with a customer or employer. They will have significant losses i...

Farid Askerov

Read more

22.04.2021

Website

Today, owning a company's website is as important as owning a store, office or phone number. Research has shown that customers want brands to have their own online content. If you hav...

Farid Askerov

Read more

22.04.2021

Rebranding

Sometimes we come across a word that some of you have not heard.
"Rebranding"
What is rebranding? How is it done and what does it have to do with people, companies...

Səməd Abbasov

Read more

22.04.2021

Contact us

Social media


Go to map

Baku city Heydar Aliyev ave. 115

See office

Caspian Sport Plaza 3th Building