Introduction to Sass Variables
SASS variables can be used to assign value to a name which starts with $ symbol and later it can be referred to the name instead of the value. In spite of its ease, SASS variables are considered one of the useful tools which allow us to reduce repetition, enable to do complex calculations, configure the libraries and many more. Sass variables consider hyphens and underline as similar, like all Sass identifiers. It indicates both $font-size and $font size are pointing to the same variable. The variables are a way of storing information that will be able to reuse afterward.
In Sass, we can store information in variables such as:
- boolean
- color
- string
- numbers
- lists
- nulls
Syntax:
The basic syntax for the defining the SASS variable can be written as shown below:
$variable_name : value;
For ex,
$var_size: 25px;
How Variables works in Sass?
- SASS variables can be worked with the variable name declared with the $ sign symbol.
- This variable can be used to diminish the repetition of the value of the variables and perform mathematical calculations to make lot of work easier.
Defined variable can be used in the SCSS as shown below:
Code:
$var_size: 25px;
$var_color: red;
p{
font-size: $var_size;
color: $var_color;
}
When you compile the CSS file, we will get the below style sheet:
Code:
p{
font-size: 25px;
color: red;
}
Examples of Sass Variables
Given below are the examples:
Example #1
Create a file with name sass_import.html.
Code:
sass_var_example.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Variables Example </title>
<link rel="stylesheet" type="text/css" href="sass_var_demo.css"/>
</head>
<body>
<h3>Welcome to EDUCBA... !!!</h3>
<div class="styledemo">
Educba is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.
</div>
</body>
</html>
Now create a scss file with name sass_var_demo.scss and put the below code.
Code:
sass_var_demo.scss
$var_fontweight: 250;
$var_Color: blue;
$var_FontSize: 25px;
$var_Width: 650px;
body {
font-weight: $var_fontweight;
font-size: $var_FontSize;
color: $var_Color;
}
.styledemo {
width: $var_Width;
}
Put the above both two files in the root folder of installed ruby folder. Now open the command prompt and run the below command to watch the file and communicates it to SASS and updates the CSS file every time SASS file changes.
Code:
sass --watch .sass_var_demo.scss: sass_var_demo.css
The sass_var_demo.css file includes the below code.
Code:
body {
font-weight: 250;
font-size: 25px;
color: blue;
}
.styledemo {
width: 650px;
}
Output:
Example #2
Below example defines variables for heading, paragraph and hyperlink. Execute the programs in the same process as defined in the above example.
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Variables Example </title>
<link rel="stylesheet" type="text/css" href="sass_var_demo1.css"/>
</head>
<body>
<h1> Hello World...</h1>
<div class="styledemo">
<h2> Welcome to EDUCBA... !!!</h2>
<p>Educba is online teaching providing server which helps various stream people or candidates to upgrade their knowledge respective to their domain.</p>
For more information, click here <a href="example.com/">https://www.educba.com/</a>
</div>
</body>
</html>
Now create a scss file with name sass_var_demo1.scss and put the below code.
Code:
sass_var_demo1.scss
$heading_color: #ADC1CC;
$para_color: #41B15D;
$link_color: #E59D3C;
h2 { color: $heading_color; }
p { color: $para_color; }
a { color: $link_color; }
Compile the code with sass –watch command as shown in the above example.
The sass_var_demo1.css file will have the below code:
Code:
sass_var_demo1.css
h2 {
color: #ADC1CC;
}
p {
color: #41B15D;
}
a {
color: #E59D3C;
}
Output:
Example #3
How to display image with variables of height and width?
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> SASS Variables Example </title>
<link rel="stylesheet" type="text/css" href="sass_var_demo2.css"/>
</head>
<body>
<div class="styledemo">
<h2> Welcome to EDUCBA... !!!</h2>
<img src="data:image/jpeg;" class="style">
</div>
</body>
</html>
Now create a scss file with name sass_var_demo.scss and put the below code.
Code:
sass_var_demo2.scss
$heading_color: #ADC1CC;
$img_width: 250px;
$img_height: 250px;
h2{
color: $heading_color;
}
.style{
width: $img_width;
height: $img_height;
}
Compile the code with sass –watch command as shown in the above example.
The sass_var_demo2.css file will have the below code:
Code:
sass_var_demo2.css
h2 {
color: #ADC1CC;
}
.style {
width: 250px;
height: 250px;
}
Output:
Conclusion
So far, we have studied about the SASS variables which are very helpful in repetitive work. When you define properties such as color or size which are repeated in the file, can be made use in the other CSS properties with help of variables. The variables make this work faster and allows developers to make changes very easily. Variables can be reused and therefore, it makes our code very easy to maintain and change.
Recommended Articles
This is a guide to Sass Variables. Here we discuss the introduction, how variables works in Sass along with respective examples. You may also have a look at the following articles to learn more –