What is SASS?

jamessoun93·2019년 12월 15일


목록 보기

What is SASS?

Sass is a CSS preprocessor, an extension of CSS that adds power and elegance to the basic language.

Basically, we use SASS to fix the problem that basic CSS has.

How does it work?

We write SASS code in SASS file. Then we run the SASS compiler which converts the SASS code into regular CSS code as if all we ever did was writing regular CSS.


  • Variables: for reusable values such as colors, font-sizes, spacing, etc
  • Nesting: to nest selectors inside of one another, allowing us to write less code
  • Operators: for mathematical operations right inside of CSS
  • Partials and imports: to write CSS in different files and importing them all into one single file
  • Mixins: to write reusable pieces of CSS code
  • Functions: similar to mixins, with the difference that they produce a value that can than be used
  • Extends: to make different selectors inherit declarations that are common to all of them
  • Control directives: for writing complex code using conditionals and loops


SASS Syntax

	list-style: none
    float: left
    & li
    	display: inline-block
        margin-left: 30px

SCSS Syntax

.navigation {
	list-style: none;
    float: left;
    & li {
    	display: inline-block;
        margin-left: 30px;
  • SASS Syntax:
    - Indentation Sensitive
    • No curly braces
    • No semi-colons
  • SCSS Syntax:
    - Similar to Javascript code block
    • Uses curly braces
    • Uses semi-colons
Front-end Developer @ WeCode

1개의 댓글

2019년 12월 15일

Legit explanation! Thanks :)

답글 달기