I got the opportunity to attend KCDC-2016. Most of the talks were focused on web development tools, frameworks and programming languages. I found all of them interesting. so I thought of sharing what I learned. One that interests me most was about SASS.

getting started with SASS

What is SASS

SASS stands for Syntactically awesome style sheet. It is an extension of CSS, a scripting language that compiles to give CSS output. it is less code writing, more readable and makes the code maintainable.

SASS comes with advanced features that are not available in CSS. For example, a user can define variables in SASS. it supports nested logic which is not allowed in CSS3. Mixin is another feature which is not available in CSS and is highly used by developers. We can leverage loops in SASS, pass arguments etc. We will go through each topic one by one.

Variables

Variable can be defined in SASS by using ‘$’ that can have strings, numbers, colors, lists value. Once the variable is defined, it can be used multiple times just like in any other scripting language. The benefit of defining a variable is that the variable can be used at multiple places and can be easily maintained. For example, if the border color of the element needs to be the same as the border color of another element, it is useful to set the borderColor as a variable, making sure it will stay same wherever it is used. An example of this is the border color of control such as a button, box etc. This could be declared as

$borderColor: #000000;  
#div{  
    border-color: $borderColor;  
}  
  
.button{  
    border-color: $borderColor;  
}  
 

Above code will be compiled to CSS as followed:

#div{  
    border-color: #000000;  
}  
  
.button{  
    border-color: #000000;  
}  

Operators in SASS

SASS allows the use of mathematical operators in the code which is helpful within mixins. Arithmetic operators are used for performing the standard arithmetic operations. Addition ‘+’, subtraction ‘-‘, division ‘/’ and percentage ‘%’ operators can be used in SASS with numeric values. The operators are useful when using the same variable in two selectors with defined rules. Any rule with a measurement can take a variable, including margins, padding, font-size and line-height:

Example1

.button {  
    border-left: 5px + 4em; // error incompatible units  
}  
 

Example2

.button {  
    border-left: 5px + 4;  
}  
 

The ‘+’ operator will not work in above example and shows an error because units are not compatible with each other.

Similarly, multiplying two numbers of the same unit together will produce invalid CSS:

.button{  
    border-left: 5px * 4px;  
}  
 

Expressions in parentheses are evaluated first.
The multiplication ( * ) and division ( / ) operators have a higher priority compared to the addition ( + ) and subtraction operators ( – )

Example

$border: 6px;  
.button {  
      border-left: 3px * 5 + 5px;  
      border-right: 3 * (5px + 5px);  
      border-top: (6px / 2);  
      border-bottom: ($border /2 );  
}  
 

Above code will be compiled to CSS as followed:

.button {  
  border-left: 20px;  
  border-right: 30px;  
  border-top: 3px;  
  border-bottom: 3px;  
}  
 

To test the equality of two values, equality operators can be used with conditional statements. It returns a Boolean value based on their evaluation. Saas supports ‘==’ and ‘!=’

SASS also supports four comparison operators. greater than ‘>’, greater than equal to ‘>=’, less than ‘<' and less than equal to'<='. Example

$border: 5px;  
.button {  
    @if($border <= 10px) {  
        border-left: $border;  
    } @else {  
        border-right: $border;  
    }  
}  
 

Above code will be compiled to CSS as followed:

.button {  
  border-left: 5px;  
}  
 

Sass, like most programming languages, supports three logical operators. (and, or, not)

Example

$border: 5px;  
.button {  
    @if($border <= 10px or $border == 5 ) {  
        border-left: $border;  
    } @else {  
        border-right: $border;  
    }  
}  
 

Above code will be compiled to CSS as followed:

.button {  
  border-right: 5px;  
}  
 

'+' operator also works as a string concatenation operator. Here are some basic rules that this operator follows:

  • If the string before + operator is quoted, the result would be a quoted string.
  • If the string before + operator is unquoted, the result would be an unquoted string.

Build in functions in SASS

You can leverage build in functions. you can see the list of build in functions here.

Nesting in SASS

SASS supports nesting declaration. User can have a declaration inside a declaration

Example

$color:#000000;  
.button{  
  font-size: xx-small;  
  color: $color;  
  .a{  
    color: $color;  
  }  
}  
 

Above code will be compiled to CSS as followed:

.button{  
        font-size:xx-small;  
        color:black;  
        }  
  
  
.button .a{  
        color:blue;  
        }  
 

Loops in SASS

It also supports loops to iterate over lists and maps. Loops are very helpful while making the code more maintainable. Three kinds of loops that SASS supports are:

  • The for-loop (using @for), to iterate from a number ‘A’ to a number ‘B’;
  • The each-loop (using @each), to iterate over a list or a map;
  • The while-loop (using @while), to iterate while a given condition is truthy.

Example of for loop:

$button: button;  
@for $i from 1 through 3 {  
    #{$button}-#{$i} { border: 60px + $i;}  
}  
 

Above code will be compiled to CSS as followed:

button-1 {  
  border: 61px;  
}  
  
button-2 {  
  border: 62px;  
}  
  
button-3 {  
  border: 63px;  
}  
 

Example of each loop:

@each $color in blue, white, red {  
   .#{$color}-button{  
      background: $color;  
    }  
}  
 

Above code will be compiled to CSS as followed:

.blue-button {  
  background: blue;  
}  
  
.white-button {  
  background: white;  
}  
  
.red-button {  
  background: red;  
}  
 

Example of while loop:

$buttontype: 4;  
  
@while ($buttontype > 0){  
  .button-#{$buttontype}{  
    width: 10px + $buttontype;  
  $buttontype: $buttontype - 1;  
  }  
}  
 

Above code will be compiled to CSS as followed:

.button-4 {  
  width: 14px;  
}  
  
.button-3 {  
  width: 13px;  
}  
  
.button-2 {  
  width: 12px;  
}  
  
.button-1 {  
  width: 11px;  
}