Variable in CSS | Use of variable in CSS | How to use Variable in CSS

Variables are available in CSS by a very familiar easy syntax.

first Declare variables in CSS with the @define directive.

@define {
    var_font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    var_bg_color: #f0f0f0;
    var_width: 50px;
    bg_img: red-flower;
}

when you want to use declare variable than it should be use by using a dollar function.
width: $(  var_width);


Variables can also be use inside quoted strings and inside words.

background-image: url(images/img-$( bg_img ).png)
content: "Hello $( msg )!";


also we can use css variable as Global variables.