Sass - Variables

Description

Programmers use variables to represent data, such as numeric values, characters or memory addresses. The importance of variables is, you can reuse the stored values in the variable throughout the stylesheet.

Syntax

$variable_name : some value;

Variables are defined with dollar sign ($) and ends with semicolon (;).

Example

The following example demonstrates the use of variable in the SCSS file −

<html>
   <head>
      <title>Variables</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container">
      <h1>Example using Variables</h1>
      <p>Sass is an extension of CSS that adds power and elegance to the basic language.</p>
      </div>
   </body>
</html>

Next, create file style.scss.

style.scss

$txtcolor:#008000;
$fontSize: 20px;

p{
   color:$txtcolor;
   font-size:$fontSize;
}

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\style.scss:style.css

Next, execute the above command; it will create the style.css file automatically with the following code −

style.css

p {
   color: #008000;
   font-size: 20px;
}

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in variables.html file.
Open this HTML file in a browser, an output is displayed as shown below.

sass_script.htm