Stylus - variables

variables are basic entities in a programming language. It uses to declare a variable and store the value, use in multiple places.

It supports the Don’t Repeat Yourself (DRY) principle

Stylus Variable

Variables are declared using the below syntax.

variablename= value

VariableName is a valid identifier name declared and It can include $ in it value is a valid CSS attribute value.

Let’s declare a variable

 header1-font = 25px
 header2-font = 20px
 $header3-font = 20px

Variables are normal identifier names as well it contains $ in it

the above three variables are valid.

How to use those variables.?

You can use the variable name like a normal variable, no syntax is not required

 h1{
     font-size: header1-font
 }

 h2{
     font-size: header2-font
 }

 h3{
     font-size $header3-font
 }

Generated CSS

h1 {
  font-size: 25px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 20px;
}

use the property as a variable lookup

Sometimes, Property values can be referenced in the same selector.

For example,

max-width is declared with 100px value. width is assigned with half of the max-width value. used @ with max-width to look up property value.

 h1{
     max-width:100px
     width: (@max-width/2)
 }

Generated CSS

 h1 {
  max-width: 100px;
  width: 50px;
}

Variables Scopes in Stylus

variables declared global and local variables. The variables declared in the block are local or block scope variables. And all other variables are called global variables.

 primary-color = "green"

 h1{
   primary-color  = "red"
    color: primary-color
 }

 h2{
        color: primary-color
 }

Global variables are overridden with local variables Generated CSS

h1 {
  color: "red";
}
h2 {
  color: "green";
}