/ css-variable

What is CSS variable and how to use it

What is the CSS variable?

  • CSS variable is also known as custom properties.
  • CSS variable is one kind of store in which we store value and use it later when needed.
  • You can able to declare CSS variable at the page level and at the element level.

How to use it?

  • If you declare it at page level then you can able to use it in any elements of that page.
  • If you declare it at the element level then you can able to use it in that element and its child elements.
  • You can declare the CSS variable by prefixing the variable name with (--).
Format: 
    element {
      --yourvariablename: value;
    }

Example: 
     - Declare at page level :
       :root {
         --main-color: #af02af;
       }
         
     - Declare at element level:
       .title {
         --main-color: #af02af;
       }
  • You can use the CSS variable using var().
  • var method accepts two arguments
  • the first argument is the name of the CSS variable that you want to use
  • second is default value which is optional. if you use a CSS variable that does not exist then default value applies to the element.
Format: 
      css-selector {
        css-property: var(--yourvariablename, defaultValue);     
      }

    Example: 
      .title {
        color: var(--main-color, red); 
      }

Why you should use CSS variable?

  • Let say you have a large website in which you use 'pink' color at hundred of places.
  • Now if there is any change request from the client-side to update 'pink' color with 'black' color.
  • So, In this situation, you have to change 'pink' color with 'black' color manually at each place where you used it.
  • This is a time-consuming and repeating process.
  • So, to stop repetition and to save time you should use the CSS variable.

What you can do with CSS variable?

  • you can able to override the CSS variable for a specific element.
  • you can able to change the CSS variable at runtime by using setProperty method of element's style attribute in javascript.
  • The following link contains a live example of how to use CSS variable, override CSS variable and also changing CSS variable value using javascript:
    https://www.w3schools.com/code/tryit.asp?filename=GBOZ09LDCGQ5


What is CSS variable and how to use it
Share this

Subscribe to Logicwind