Sass - Variable Defaults

Advertisements

Previous Page
Next Page  

Description

You can set the default values for variables by adding !default flag to the end of the variable value. It will not re-assign the value, if it is already assigned to the variable.

Example

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

<html>
   <head>
      <title>Variable Defaults</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">
         <h2>Example using Variable Defaults</h2>
         <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

$myval1: null;
$myval1: "Sass Developed by Natalie Weizenbaum and Chris Eppstein" !default;

p:after {
   content: $myval1;
}

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:after {
   content: "Sass Developed by Natalie Weizenbaum and Chris Eppstein";
}

Output

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

  • Save the above given html code in var_defaults.html file.

  • Open this HTML file in a browser, an output is displayed as shown below.

Sass Variable Defaults
sass_script.htm
Advertisements