What is SASS?

jamessoun93·2019년 12월 15일
0

TIL

목록 보기
3/6
post-thumbnail

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.

Features

  • 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 vs SCSS?

SASS Syntax

.navigation
	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
profile
Front-end Developer @ WeCode

1개의 댓글

comment-user-thumbnail
2019년 12월 15일

Legit explanation! Thanks :)

답글 달기