[CSS] CSS 전처리기 SCSS, SASS의 차이점

 

 

 

 

🤔  SCSS, SASS ??

 

"CSS의 복잡함과 불편한 재사용성을 높혀주고, 가독성과 유지보수의 편의성을 제공해주는 것"

 

 

 

📌 CSS의 단점과 SCSS(SASS)의 장점

 

CSS의 단점

• 선택자 생성 시 불필요한 부모요소 선택자를 적어야 한다.
• 변경사항이 있을 때 관련된 모든 것을 수정해야 한다.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

SCSS(SASS)의 장점

• 선택자의 중첩(Nesting)을 통해 반복되는 선택자 사용을 줄일수 있다.
• 변수를 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
• 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
• Import, Mixin, Extend/Inheritance와 같은 기능을 사용할 수 있다

 

 

 

🌈 SCSS, SASS의 차이점 및 문법

 

{ } (중괄호)와  ; (세미콜론)

• SCSS는 중괄호와 세미콜론을 사용한다
• SASS는 중괄호와 세미콜론을 사용하지 않는다.

 

Mixins

• SCSS는 @mixin과 @include를 사용한다.
• SASS는 = 와 + 기호를 사용한다.

 

 

 

SCSS 문법

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block; 
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

SASS 문법

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

 

 

 

SASS(SCSS)를 CSS pre-processor(전처리기)라고 하는데 이는 SASS를 브라우저에 즉시 적용하는 것이 아니라 컴파일러를 통해 CSS 문법으로 바꾼 뒤 적용하기 때문이다.

 

 

 

 

 

 

 

# 참고사이트

• 테스트 툴 : https://www.sassmeister.com/
• SASS 공식문서 : https://sass-lang.com/