SaSS Datatypes

Program languages provide data types to hold the different types of the value that variable holds. SASS language provides the 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 dividing, multiplying, and, 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 in valid CSS types, for example, 4px*2px outputs an error, The reason is resulting in 8px squared, squared units are not supported in CSS.

Invalid numbers

String type

The 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";
}

The above example covert the string as this to CSS string. And also interpolation syntax is a different syntax we need to consider if you have used variables inside interpolation syntax #{variable}, strings 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 inbuilt color expression same as CSS color syntax expression It has support for creating new colors using manipulation functions for lighter, saturated, and mixed 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);
}