Sass(SCSS)-(1)

seul_tory·2023년 5월 2일

Sass(Scss)style sheet

Style Sheet

목록 보기

1/1

1. CSS의 단점

선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다.
결국 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 된다.

2. Sass(SCSS)등장

📌Sass(SCSS) 란?
Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어이다.

📌CSS 전처리기(Preprocessor) 언어 란?
CSS 전처리기(Preprocessor) 언어는 전처리기 언어는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.
따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 된다.

🔧동작원리
Sass, Less, Stylus 같은 전처리기 언어는 직접 동작시키는게 아니다.
우선 전처리기 언어 문법으로 작성(코딩)하고, CSS로 컴파일해서 웹으로 동작시키는 것이다.

❗결론
Sass는 CSS의 확장 전처리기 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다.
Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차인 것이다.

3. Sass(SCSS)의 장점과 단점

👍장점

CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
즉, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.

CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

	- 변수의 사용
	- 조건문과 반복문
	- Import (모듈화)
	- Nesting (선택자 반복 작성 줄여주는 기능)
	- Mixin (함수 개념)
	- Extend/Inheritance (확장/상속)

선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.

👎단점

전처리기를 위한 도구 필요
컴파일 시간 소요

4. Sass와 SCSS

📌Sass

📌Sass
Sass는 코드를 CSS로 해석하는 역할을 하는 전처리기로써의 의미, 문법(구문)으로써의 의미를 가지고 있다.

🔧컴파일 과정 : Sass 문법을 기반으로 코드를 작성 ➡ Sass 전처리기(컴파일) ➡ CSS 파일 생성

📌SCSS

📌SCSS
SCSS는 Sass의 3버전에서 등장한 언어이다.
SCSS는 기존 Sass 구문에 비해 좀 더 CSS 코드와 유사한 형태를 띄고 있어 퍼블리셔들에게 가장 각광 받고 있는 전처리기 언어이다.

🔧컴파일 과정 : SCSS 문법을 기반으로 코드를 작성 ➡ Sass 전처리기(컴파일) ➡ CSS 파일 생성

5. Sass와 SCSS의 차이

1) 확장자

*.sass/*.scss : 둘은 엄연히 다른 파일이다. ➡ 확장자에 따라 익혀야할 문법 또한 다르다.

2) 구문 스타일

*.sass : 파이썬과 같이 들여 쓰기를 사용
*.scss : CSS처럼 중괄호{}와 세미콜론 ;을 사용

CSS	SASS	SCSS

3) 믹스인(mixin) 문법

*.sass : '=' 로 선언하고 '+' 로 적용시킨다.
*.scss : '@mixin' 으로 선언하고 '@include' 로 적용시킨다

이미지 출처: inpa.tistory.com

6. SCSS를 써보자

✔SCSS는 2010년 5월 버전 3Visit Website으로 업그레이드하면서 갖춰진 새로운 문법 체계이다.

✔CSS 문법을 SCSS 문법 안에서 사용할 수 있으므로, CSS 핵과 IE의 filter와 같은 특정 브라우저 벤더용 문법도 포함하여 CSS가 지원하는 모든 문법과 기능을 SCSS에서 그대로 사용할 수 있다.

✔이런 완전 호환성 덕분에 모든 CSS 라이브러리를 그대로 이어서 사용할 수 있고, 기존 CSS를 SCSS로 전환하는 작업을 쉽게 시작할 수 있다.

❗정리❗

공식 레퍼런스: Sass 공식 레퍼런스 조차도 SASS보다 CSS와 더 비슷한 SCSS를 선호한다
사용자 수: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 압도적으로 더 많다.
CSS 호환성: 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높인다.
여러 줄 쓰기 지원 : Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 여러 줄 쓰기를 지원하지 않는다. 반면에 SCSS는 여러 줄 쓰기를 지원한다.

하지만, 사실 둘(Sass와 SCSS)은 완전히 동일한 기능을 갖고 있기 때문에 어느 것을 사용할지는 순전히 여러분에게 달려 있다.

이것은 단지 시각적 취향의 문제라고 밖엔 할 수 없는데, 만일 파이썬 구문 스타일에 익숙하면 Sass를, 자바스크립트 구문 스타일에 익숙하면 scss를 쓰면 된다.

✅Tip
less나 stylus 같은 다른 전처리기 언어보다도 scss가 더 뛰어난 전세계에서 가장 많이 사용하는 전처리기 언어라고 한다.

seul_tory