What is a SASS?

CSS problem - messy & unmanageable

Sass is a CSS preprocessor, an extension of CSS.
basically, we use Sass to fix the problems that we have with CSS.

what is the problem of CSS?

CSS gets very messy, very quickly.

For each project, having a single CSS file with thousands of lines of code without any reusable pieces, without any logic, gets completely unmanageable after some time.

CSS problems =
no reusable pieces
no any logic
unmanageable

Why we use a SASS?

And that's why we use a SASS.
It provide us with a couple of handy(= convenient) features and tools that CSS simply doesn't have while at the same time, not changing the fundamental way that CSS works.

Why it Called CSS preprocessor?

Instead of writing a CSS file with regular CSS code, we write Sass code in Sass files. we need to process our Sass code first.

Then, we run a compiler, and that compiler converts the Sass code we wrote into regular CSS code.
Because our website has no idea that the code we wrote in SASS.
That why is called CSS preprocessor.

So the final output is basically in the form of CSS.

This process is called transpiling.

What is the main feature of SASS?

So what are these features that Sass actually gives us?

1. Sass gives us variables which, just like in normal programming languages, allow us to have reusable values such as colors, font sizes, spacing, etc.

2. we have nesting(= occupy), in order to nest selectors inside of one another
   It allowing us to write less code.

3. there are operators for mathematical operations right inside of CSS.

4. The most powerful featur of SASS is then, partials and imports which are one of the most important and most useful features of Sass.
   It allowing us to write CSS in different files, and then importing them all into one single file. (important!)

5. there are mixins, to write reusable pieces of CSS code.

6. And also functions, which are quite similar to mixins with the difference that they produce a value that can be used later.

7. we have extends, which can be used to make different selectors inherit declarations that are common to all of them

8. Finally, control directives allow developers to write complex code using conditionals and loops like in real programming language. It's more for writing CSS frameworks or something. (not using in real project. it's nearly not needed in a real world project.)

SASS vs SCSS

There are actually two Sass syntaxes.

One syntax, which is actually the original one, is just called Sass.

However, I find this syntax a bit confusing, and I find it also more difficult to learn, and also more difficult to convert original CSS projects to Sass with the syntax.

because the Sass syntax is indentation sensitive(
= 들여쓰기) and doesn't use any curly braces{ } and semicolons ; .

The other one is called SCSS which stands for Sassy CSS.
which preserves the way that original CSS looks like.
So it is bit easier to understand compared to Sass.

Everything should still work the exact same way. They're just look different.