SAAS Data Types

This tutorials covers the different data types supported in sass/scss language..

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);

  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';          


compiled css iss

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 inbuilit color expression same as CSS color syntax expression
It has a support for creating new colors using manipulation functions lighter,satured and mix etcc 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); }