css, sass, scss는 뭐가 다른걸까?

CSS(Cascading Style Sheets)

css는 문서의 스타일을 구현하는 스타일 시트 언어이다.

 

프로그램의 크키가 커질수록 css 파일들이 지저분해지고, 유지보수가 힘들어지는 경험을 해본 적이 있다.

불필요한 선택자(Selector)의 과도한 사용과 연산 기능의 한계, 구문(Statement)의 부재 등이 그 이유이다.

CSS 전처리기는 그러한 CSS 작업을 보다 쉽게 해주며 가독성과 재사용성을 높여 유지보수가 용이해지도록 도와준다.

 

 

CSS 전처리기

위에서 설명한 CSS의 부족한 점들을 해결하기 위해 만들어졌다.

종류 : SASS(SCSS), Less, Stylus, PostCss

 

장점

- 재사용성 : 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능하다.

- 시간적 비용 감소 : 임의 함수 및 내장 함수로 인한 개발 시간적 비용 절약할 수 있다.

- 유지 관리 : 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지보수 용이하다.

- Learning curve가 낮다.

 

단점

- 전처리기를 위한 도구 필요하다.

- 퍼블리셔나 디자이너가 개발에 대한 역햘과 요소 접목으로 개발적인 요소 알아야 한다.

  즉, 개발자에 한해서만 Learning curve가 낮다.

 

 

SASS(Syntactically Awesome Stylesheets)

- SCSS보다 먼저 등장 했다.

- 중괄호 {}와 세미콜론 대신 줄바꿈으로 범위를 구분한다.

- 변수 정의 및 사용, 조건문과 반복문, Import, Nesting, Mixin, Extend/Inheritance의 사용이 가능하다.

 

SCSS(Sassy CSS)

- CSS 구문과 완전히 호환된다.

- Sass의 모든 기능 지원한다.

 → SCSS가 CSS와 거의 같은 문법으로 Sass기능 지원 → 더 넓은 범용성 + CSS와의 호환성

 

사용 예시

html

<div>
	<ul class='list'>
  		<li>apple</li>
  		<li>peach</li>
  		<li>melon</li>
	<ul>
</div>

css

.list {
  width: 100px;
  padding : 10px;
}

li {
  color: black;
  background-color : gray;
}

li:first-child {
  border : 1px solid black;
}

 

SASS : 괄호와 세미콜론 없이 파이썬처럼 들여쓰기로 구분한다.

// SASS
.list
  width: 100px
  padding : 10px;
    li
      color: black;
      background-color : gray;
        &:first-child
          border : 1px solid black

 

SCSS :  중괄호와 줄바꿈으로 구분한다.

// SCSS

.list {
  width: 100px;
  padding : 10px;
  li {
    color: black;
    background-color : gray;
    &:first-child {
      border : 1px solid black;
    }
  }
}

 

 

참고
https://velog.io/@eunoia/CSS-%EC%A0%84%EC%B2%98%EB%A6%AC%EA%B8%B0%EB%9E%80
https://designmeme.github.io/ko/blog/write-sass-with-scss/
https://velog.io/@jch9537/CSS-SCSS-SASS