[ Sass(SCSS) ] 정의 , 기본 문법

💬 개요

처음에는 CSS를 사용하여 개발을 했는데,

간단한 레이아웃에서는 괜찮았지만 화면이 복잡하고 많아지기 시작하면서

내가 작성한 코드지만 한눈에 알아보기 어려웠고 나중에는 클래스 이름이 겹치기도 하였다.

이를 보완하기 위해 SCSS를 사용해보고자 한다.

 

📌 SASS ( Syntactically Awesome StyleSheet )

코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고,

개발의 효율을 올리기 위한 CSS 전처리기 언어

✔️ CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어 )

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

웹은 CSS밖에 모르기 때문에 전처리기 언어 문법으로 코딩하고, CSS로 컴파일해서 웹으로 동작시킨다.

▶ Sass는 CSS의 확장 전처리기 언어이고, CSS 코드 생산을 위한 일종의 도구인 셈

 

📌 Sass VS SCSS 

SCSS : Sass의 3버전에서 등장한 언어로, CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset)

✔️ CSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원

 

1️⃣ 확장자

*.sass / *.scss  

 

2️⃣ 사용 방법

▶ SASS : 들여 쓰기 + 줄 바꿈

▶ SCSS : 중괄호 + 세미콜론

 

3️⃣ 단점

전처리기를 위한 도구가 필요하며 컴파일 시간이 소요 되므로

작은 프로젝트는 css , 큰 프로젝트는 scss를 추천하는 듯 하다.

 

📌 SCSS 기본 문법/기능

1️⃣ 변수(Variable) 할당

자주 사용하는 값들을 변수로 지정해서 재사용 가능

 

2️⃣ 중첩(Nesting) 구문

중첩기능을 통한 쉬운 구성 , 높은 가독성

& (상위 선택자 참조)

 

3️⃣ 모듈화 (Modularity)

@use를 사용하여 파일을 분할하고 모듈화할 수 있다.

as 를 사용하여 이름을 정할 수도 있다.

 

4️⃣ 믹스인 (Mixins)

함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있다. (재사용성)

 

5️⃣ 확장&상속 (Extend/Inheritance)

중복 코드를 줄이고, 통합 관리가 간편해진다.

%는 아무 셀렉터에 포함되지 않지만 그 도면이 필요할때 @extend 로 도면을 상속시킨다.

6️⃣ 연산자 (Operators)

css의 경우 연산을 사용하기 위해서는 calc 를 사용해야한다.

scss는 바로 연산이 가능하다.

📢 주의 : 나누기 연산은 바로 사용할 수 없다.

 

💬 마치며 

첫 번째 vue 프로젝트를 진행하며 css로만 코드를 작성했었다.
하지만 화면이 많아질수록 클래스 이름 짓는 것도 어려워지고, 중복되는 클래스 이름이 생기면서 어려움을 많이 겪었다.
현재는 scss를 사용하여 두 번째 프로젝트를 진행하고 있는 중인데 훨씬 가독성이 좋다.
아직은 중첩 기능만 사용해보았지만, 프로젝트를 진행하면서 더 다양하게 사용하는 방법을 공부해봐야겠다.