[KUIT] CSS 전처리기, SaSS의 특징

이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다.

---

CSS 전처리기

 

CSS 전처리기는 전처리기가 가진 특별한 문법으로 CSS를 생성하도록 하는 프로그램입니다.

→ 기존 CSS가 가진 문제점들을 해결하기 위해 만들어졌습니다.

CSS 전처리기를 사용하면 다음과 같은 장점이 있습니다.

 

1. 재사용성
   • 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능
2. 시간적 비용 감소
   • 임의 함수 및 내장 함수로 인한 개발 시간적 비용 절약
3. 유지 관리
   • CSS코드를 여러 파일로 나눠 유지 보수성 향상
   • 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리 용이
4. Learning curve 낮음

하지만 전처리기를 위한 도구가 필요하다는 점과, 퍼블리셔나 디자이너가 개발에 대한 역햘과 요소 접목으로 개발적인 요소 알아야한다는 단점이 있습니다.

 

출처: https://velog.io/@eunoia/CSS-전처리기란

CSS 전처리기란?

 

CSS 전처리기에는 크게 SaSS/SCSS, less, Stylus가 있습니다.

(여기서 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.

출처: https://heropy.blog/2018/01/31/sass/ )

 

 

이런 전처리기 중에는 SaSS가 가장 많이 쓰이고 있습니다.

 

---

SaSS의 특징

출처: https://velog.io/@uuujinnn/Sass의-개요와-사용-방법

Sass의 개요와 사용 방법 (feat. Visual Studio Code)

 

 

1. 변수

Sass에서는 $ 기호를 사용하여 변수를 정의할 수 있습니다.

-> 반복적으로 사용되는 값, 색상이나 글꼴, 간격 등을 일괄적으로 변경 가능

 

2. 중첩

Sass는 선택자를 중첩하여 작성할 수 있습니다.

-> CSS의 가독성을 높일 수 있습니다.

 

3. Mixin

@mixin을 사용하여 스타일 블록을 정의하고, @include를 사용하여 해당 스타일 블록을 적용할 수 있습니다.

-> 이를 통해 스타일을 재사용하고, 코드를 더욱 간결하게 작성할 수 있습니다.

 

4. 상속

Sass에서는 @extend를 사용하여 스타일을 상속할 수 있습니다.

-> 중복되는 스타일을 줄일 수 있습니다.

 

각 특정의 예시는 위 출처 링크로 들어가면 확인할 수 있습니다!