[CSS] SCSS 에 대하여

css : Cascading Style Sheets
Sass : Syntactically Awesome Style Sheets
SCSS : Sassy CSS 

Sass

css 의 단점을 보완하기 위해 나온 확장 언어이자, 전처리기로 css 에 존재하지 않는 기능들을 가지고 css 를 다루는데 도움을 주는 툴이다.

Sass 가 제공하는 기능은 다음과 같다

• Variable(변수) : 자주 사용하는 색이나 폰트 등을 변수로 지정하여 재사용할 수 있음
• Nesting(중첩) : 상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성가능.
• Modularity(모듈화) : @use를 사용하여 파일을 분할하고 모듈화 할 수 있음
• Mixins(믹스인) : 함수처럼 defalut parameter를 지정할 수 있고, parameter를 받아서 속성을 부여할 수 있음(재사용성)
• 확장&상속(Extend/Inheritance) : @extend 사용 시 css 속성 집합을 상속받을 수 있음
• 연산자(Operators) : 나누기 이외에도 sin, cos, random, min 등을 사용 가능.

SCSS

Sass 의 3버전에서 등장한 문법

가장 큰 차이는 중괄호 {} , 세미콜론 ; 이다.

기존 Sass는 Python 과 동일하게 들여쓰기와 개행을 통해 문법을 구분했다면

SCSS 는 중첩에 중괄호, 속성의 끝에 세미콜론을 쓰면서 문법을 구분하게 바뀌었다.

 

SCSS 코드

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

SASS 코드

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

참고글

https://cocoon1787.tistory.com/843

[CSS] CSS, SASS, SCSS 차이점, 사용방법

 

https://velog.io/@jch9537/CSS-SCSS-SASS

CSS & SCSS & SASS