Skip to main content

Sass Variables

Programmers use variables to represent data, such as numeric values, characters or memory addresses.

The importance of variables is that you can reuse the stored values in the variable throughout the stylesheet.

Syntax​

$variable_name : some value;
note

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

Example​

The html 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>

and the style.scss file:

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

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

Then you tell Sass to watch the file and update the CSS when the file changes:

sass --watch my\path\style.scss:style.css

The generated style.css files is as shown below:

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

Table of Contents