웹 개발 (Web Development)/SASS and SCSS

SASS 와 SCSS 아주 쉽게 개념 정리 (사용하는 이유, 장점)

찌르비 2023. 3. 7. 13:48
반응형

 

결론부터

SASS 와 SCSS 라는 것을 사용하는 이유는?

→ CSS를 편리하게 이용하기 위해서 SASS & SCSS 를 사용한다

 

 

 

CSS 의 문제점

CSS는 그 자체로도 충분히 훌륭한 형식 언어이다.

그러나 CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해진다.

(간단한 웹 사이트도 CSS 코드는 몇천 줄을 쉽게 넘긴다...)

 

 

 

CSS 내 반복되는 내용은 줄이고 보다 효율적으로 스타일시트를 관리할 수는 없을까요??

→ SASS & SCSS 를 사용하기

 

 

 

 

근데 SASS 와  SCSS의 차이점은 ?

→ 그냥 같은거라고 생각하면 마음이 편하다

 

💡 참고) SASS가 먼저 생기고 그 다음에 SCSS가 생겼다! 그래서 난 그냥 SCSS를 사용하자 (최신게 좋자나)

 

 

굳이 차이점을 따지자면?

  1. 확장자
  2. 문법

두가지가 존재한다. 확장자는 뭐 *.scss, *.sass 라는건 너무 당연하다.

문법차이는 { }  ; 의 유무가 있다! 여기까지만 알자!  그 외에도 차이가 있겠지만 ...패스 (mixin 문법 등등)

 

SCSS

.text{
  font-size: 10px;
  a{
    color: #fff:
  }
}

 

SASS

.text
  font-size: 20px
  a
    color: #fff

 

 

 

 

 

 

Sass(SCSS) 는 전처리기 (Preprocessor)

Sass는 CSS 전처리기(Preprocessor) 라고도 한다.

그 이유는 결국 Sass는 CSS 코드를 생산해내기 위해 사용하는 일종의 도구이기 때문이다.

 

Sass가 CSS를 대체해서 웹 디자인에 적용하는 것이 아니다.

기존과 동일하게 CSS가 디자인을 꾸미는데, Sass를 통해서 CSS를 더욱 쉽고 편리하게 쓸 수 있다

 

그래서 Sass는 CSS의 확장 언어이고 스크립팅 언어이다.

 

Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차이다.

 

 

 

 

 

Sass(SCSS) 의 장점

 

  • CSS보다 심플한 표기법이다
  • 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
  • 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
  • CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
    • 변수의 사용
    • 조건문과 반복문
    • Import (모듈화)
    • Nesting (선택자 반복 작성 줄여주는 기능)
    • Mixin (함수 개념)
    • Extend/Inheritance (확장/상속)
  • 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
  • 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
  • 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
  • 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.

 

반응형