What is SASS, How to Use it?

What is SASS?

SASS is an abbreviation of Syntactically Awesome Style Sheets. It is one of the most widely used CSS preprocessors.

Most Popular CSS preprocessors are;

• SASS
• LESS
• Stylus
• PostCSS

What is the Difference Between SASS and CSS?

SASS has emerged to make writing CSS more dynamic. In short, it adds a programming language air to CSS. It contains many features that are not available in CSS. (Defining variables, using nested structures, defining functions, ...)

So what should we not do to use SASS?

There is more than one method of use, 
One of them is converters that you can download and install on your computer.

Converters briefly convert the .scss extension files we have written into .css format that browsers can understand.

Most Popular SASS to CSS converters are;

• Koala
• Scout-App
• SimpLess
• Sassmeister
• TheSassWay
• Compass
• Prepros

Another method is to convert with the help of Command Line.

If you are using Node.js, you can also install Sass using npm (Method-1)

One of the languages that SASS is built on is Node.js. Therefore, we need to install Node.js first, so that SASS can then run over Node.js.

To install Node.js, you need to download and install the version suitable for your system from https://nodejs.org/en/download/.

npm install -g sass

If you are using Ruby, you can also install Sass using gem.(Method-2)

One of the languages that SASS is built on is Ruby. Therefore, we need to install Ruby first, so that SASS can then run on Ruby.

Then we open the Command Line and type the following command.

gem install sass

So what does this ship mean?

Gem is a piece of software or application that will run in Ruby. In short, we can call it a plugin.

After writing the code, it may take 1-2 minutes to upload the relevant files.

You can also install Sass for Mac OS X or Linux operating system using brew.(Method-3)

If you use the Homebrew package manager for Mac OS X or Linux, you can install Dart Sass by running it.

brew install sass/sass/sass

Now we can run SASS. We create a file with .scss extension in the SASS folder, save it after coding it and run the following command.

sass –watch scss:css

The command we have written continuously scans the sass directory and when there is a change, it converts the changed .scss extension file to .css format.

How to Write SASS, Which Features are Most Commonly Used?

1.  Variables

It allows the use of variables in CSS, it is one of the most useful features. As I have shown below, putting a $ sign at the beginning is to indicate that it is a variable.

SASS:

$general-font: "Helvetica, sans-herif";
$my-color: #a5a5a5;
p {
font-family: $general-font;
color: $my-color;
}

CSS Output:

p {
font-family: "Helvetica, sans-herif;
color: #a5a5a5;
}

In this way, we can use the variables we have defined wherever we want. A small change in the place where we define a variable can affect the entire code written.

2. Creating Nested Structures(Nesting)

CSS is an important feature that makes writing faster, easier and reduces code clutter.

SASS:

div {
.aciklama{
  color:blue;
  &:hover{
   color:red
  }
 }
 .resim{
  width: 100%;
 }   
}

CSS Output:

div .aciklama{
 color:blue;
}
div .aciklama:hover{
 color:red;
}
div .resim{
 width: 100%;
}  

The & symbol is a structure specially used in SASS for selectors such as :hover :after :before. It affects the parent it is in.

3. Import

It is a very useful feature to get rid of code clutter and confusion. Let's have 2 .scss extension files. One of them contains our variables that we define in general, and the other one contains our SASS codes that we still give. With this feature, we combine the _variable.scss file where we define the variables with the style.scss file that we still give.

SASS

_variable.scss

$h1-font-size: 50px;
$h1-line-height: $font-weight-extralight;
$h1-color: #444444;
$h1-line-height: 60px;

style.scss

@import "variables";
h1{
font-size: $h1-font-size;
line-height: $h1-line-height;
font-weight: $h1-font-weight;
color: $h1-color;
}

CSS Output:

$h1-font-size: 50px; 
$h1-line-height: $font-weight-extralight; 
$h1-color: #444444; 
$h1-line-height: 60px;
h1{
font-size: $h1-font-size;
line-height: $h1-line-height;
font-weight: $h1-font-weight;
color: $h1-color;
}

4. Mixins

The layer structure allows us to use the CSS codes that we write using the same parameters all the time by defining them once and calling a single command everywhere. It is very similar to calling a function, but here we do not perform an operation.

SASS

@mixin overlay() {
left: 0;
 top: 0;
 background: black;
 opacity: 0.2;
}
.my-background{
 @include overlay();
}

CSS Output:

.my-background{
left: 0;
 top: 0;
 background: black;
 opacity: 0.2;
}

5. Inheritance

The join property is used to group together elements that contain common CSS codes.

SASS

.mesaj{
border: 1px solid gray;
 padding: 15px;
 color: black;
}
.basarili{
 @extend .mesaj;
 background: green;
}
.hata{
 @extend .mesaj;
 background: red;
}
.uyari{
 @extend .mesaj;
 background yellow;
}

CSS Output:

.mesaj, .basarili, .hata, .uyari{ 
 border: 1px solid gray;
 padding: 15px;
 color: black;
}
.basarili{
 background: green;
}
.hata{
 background: red;
}
.uyari{
 background yellow;
}

6. Operators

It is a very useful feature that allows us to do maths operations in CSS. You can perform mathematical operations on the SASS side and this operation is sent to the CSS side as finalised.

SASS

.box{ 
 width: 1/3 * 100%;
 height: 30px * 2.5;
}

CSS Output:

.box{
width: 33.333333333%
height: 75px;
}