SaSS Datatypes

Program languages provides data tyeps to hold the different type of the value that variable holds. SASS language provides following data types -

  • Strings
  • Numbers
  • null
  • Boolean
  • colors
  • Lists
  • Maps

Numbers type

In Sass, Number types are real numeric values with or without unit values. Numeric values can be integers - 10 or -10 or floating - 11.23 or -5.21 values These types support basic arithmetic operations like adding,subtracting divide, multiply amd ,modus operators

example sass number types

$height: 1024px;
$width: 100%;

column1 {  
 width:$width/3 ;
 margin: 5px+5px;
} 
.column2 {  
  width: $width/3;
  padding: (4px/2px);

 }
.column3{
  width:$width/3  ;

}

compiled css result

column1 {
  width: 33.3333333333%;
  margin: 10px;
}

.column2 {
  width: 33.3333333333%;
  padding: 2;
}

.column3 {
  width: 33.3333333333%;
}

Following are rules about numbers

  • Numbers can be integer or floats of same units (px,em etc), so you can divide 20px/10px but not 20px/10EM.

  • Multiplication of numbers should result valid css types, for example, 4px*2px outputs an error,The reason is results 8px squared, squared units are not supported in css.

Invalid numbers

String type

String is a group of characters like “test value”.

Rules for String types

  • String can enclosed with double quotes("") or single quotes('') or without quotes. Accept spaces
  • can append other data types

Example SCSS

$secondary-color: green;          
$secondary-color1: "blue";          
$secondary-color2: 'red';          

p{
color:$secondary-color;
}
h1{
color:$secondary-color1;
}
h2{
color:$secondary-color2;
}

compiled to css is

p {
  color: green;
}

h1 {
  color: "blue";
}

h2 {
  color: "red";
}

Above example covert the string as this to CSS string. And also interpolation syntax is different syntax we need to consider if you have used variables inside interpolation syntax #{variable}, string without quotes are considered

Interpolation string syntax example:

$name: "franc";          
$name1: john;          
$name2: tom;          
$secondary-color: green;          
$secondary-color1: "blue";          
$secondary-color2: 'red';    
p .#{$name}{
color:$secondary-color;
}
h1 .#{$name1}{
color:$secondary-color1;
}
h2 .#{$name2}{
color:$secondary-color2;
}

output is

p .franc {
  color: green;
}

h1 .john {
  color: "blue";
}

h2 .tom {
  color: "red";
}

Color types

colors in css can be created using hexa code values -#00fb0,functions - rgb(),rgba(),hsl() and hsla() or native color names codes - red,green SCSS has in built color expression same as CSS color syntax expression
It has a support for creating new colors using manipulation functions lighter,saturated and mix colors Color manipulation should be with compatible color expressions only

SCSS example

output is

$color: red;
$color1: #0000;
$color2: #ff00;
$color3: blue;



h1 {
color:lighten($color, 50%);
}
h2{
 background: mix($color1 , $color2);

}
p {
color: fade-out($color3, 0.2)
}

h1 {
  color: white;
}

h2 {
  background: rgba(128, 128, 0, 0);
}

p {
  color: rgba(0, 0, 255, 0.8);
}