Sass - Boolean Operations

Description

You can perform Boolean operations on Sass script by using and, or and not operators.

Example

The following example demonstrates the use of Boolean operations in the SCSS file −

<html>
   <head>
      <title>Boolean Operations</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>
      <h3>Example using Boolean Operations</h3>
      <p class = "bool">SASS stands for Syntactically Awesome Stylesheet..</p>
   </body>
</html>

Next, create file style.scss.

style.scss

$age:20;
.bool {
   @if ($age > 10 and $age < 25) {
      color: green;
   }
}

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

.bool {
   color: green;
}

Output

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

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

sass_script.htm