JD를 보니, 생각보다 많았던 SASS, SCSS. (나는 테일윈드가 좋은뒈)
알고 안 쓰는 거랑 모르고 못 쓰는 거랑은 다른 거니까 약간 맛보기로.
SASS vs SCSS
사실 두 가지 발음을 어떻게 해야할지 조금 난감하다. 나만 그런가?
Sass는 [새:애스]라고 하고 SCSS는 [에스씨에스에스]라고 하더라.
SASS란?
SASS는 CSS의 Super set, 즉 CSS(Cascading Style Sheets)의 확장이며 모든 기능과 일반 CSS에서는 사용할 수 없는 추가 기능을 포함하고 있다는 의미이다. 이름 약자부터가 Syntactically awesome한 style sheets를 Sass라고 한다. (ㅇ.ㅇ?)
SASS는 개발 단계에서만 사용 가능하다. 브라우저 이해하지 못하는 코드로, 컴파일 단계에서는 별도의 툴을 활용해야 한다.
(간단한 구조의 html파일에서 테스트해보는 단계라 sass-loader는 별도로 설치하지 않았고 sass에서 컴파일하는 명령어를 활용)
SASS, SCSS 둘의 차이는 무엇인가?
쉽게 설명하면, 둘 다 CSS 코드를 작성하는 문법이다.
그런데 SASS는 이 두 문법으로 작성된 코드를 CSS코드로 컴파일하는 프리프로세서의 기능도 한다. SCSS 문법으로 작성해도 SASS 프리프로세서 도움을 받아 CSS코드로 컴파일 한다.
- SASS 문법으로 코드를 작성하고 SASS 프리프로세서의 도움을 받아 CSS파일로 컴파일 된다.
- SCSS 문법으로 코드를 작성하면 SASS 프리프로세서의 도움을 받아 CSS파일로 컴파일 된다.
SCSS는 나중에 보겠지만 SASS보다 좀 더 CSS코드 같이 보인다.
Awesome한 기능들
그럼 어떤 기능이 있나?
- 셀렉터 중첩 작성이나 네임스페이스가 같은 프로퍼티 중첩 작성이 가능하다
- 변수를 사용할 수 있다. (
$var) - 공통 스타일 클래스를 통해 상속을 구현할 수 있다. (
@extends) - 재사용가능한 CSS 코드 스니펫을 만들어서 사용할 수 있다.(
@mixin,@include) - 파일 분할(
_var.scss)로 파일 자체의 볼륨을 줄일 수 있다. (@import)
SASS 시작하기
설치하기
https://sass-lang.com/install/ 에서 가이드를 확인할 수 있다.
맥북이라 brew install sass/sass/sass로 설치했다.
코드 작성하기
filename.sass를 생성하면 sass 코드를 작성할 수 있다.
일단 style.sass든, main.sass든 파일을 생성해보자.
🤔.sass, .scss어떤 걸 사용해야 해?
SASS는 세미콜론과 중괄호를 사용하지 않고 들여쓰기가 결정한다.
SCSS는 SASS와 같은 기능을 사용하는데 반면에서 세미콜론과 중괄호를 사용한다.
.scss 확장자 명을 사용하면 SCSS파일로 사용할 수 있다.
컴파일 하기
sass filename.scss filename.css
위 커맨드를 작성하면 filenname.css.map파일과 함께 filename.css파일이 생성된다. .map파일은 소스 맵 파일로, 브라우저가 코드를 원본 소스 코드에 매핑하는 것을 용이하게 한다.
매번 변경할때 마다 컴파일 커맨드 치기 귀찮으니까 아래 커맨드를 작성하면 된다.
sass --watch filename.scss:filename.css
그럼 watch 모드로 들어가게 되는데 scss파일을 변경하고 저장할 때마다 파일을 다시 저장한다.
아래 이미지에서 main.scss, type.css, _var.scss가 직접 생성한 css파일이고 main.css, main.css.map은 컴파일 과정에서 만들어진다.
SASS(SCSS) 문법
아래 코드에서는 SCSS를 사용함.
중첩
1. 중첩 셀렉터
HTML 문서의 계층 구조처럼 CSS코드를 구조화할 수 있다는 면에서 직관적이라고 할 수 있다.
// main.css
.container li {} // 이 코드를 아래와 같이 사용할 수 있다.
// main.scss
.container {
li {
// something here
}
}2. 중첩 프로퍼티
// main.css
.container {
flex-direction: column;
flex-wrap: nowrap;
}
// namespace가 같은 코드는 아래와 같이 사용할 수 있다.
// main.scss
.container {
flex: {
direction: column;
wrap: nowrap;
}
}3. 미디어쿼리 중첩
영향을 받는 요소에 중첩해 넣을 수 있다.
html {
font-size: 94.75%
@media (min-width: 40rem){
font-size: 125%
}
}4. & 연산자 사용하기
슈도(pseudo) 셀렉터를 중첩할 때 사용한다. 슈도뿐만 아니라 일반 셀렉터를 중첩할 때 연결하고 싶다면 &를 사용해준다.
// 001
.section {
:hover {
}
}
// 002
.section {
&:hover {
}
}
001번 코드의 css 컴파일 결과를 보면 .section :hover 이렇게 띄워져 있다.
002번 코드의 결과는 .section:hover로 제대로 적용된 것을 확인할 수 있다.
변수
달러 기호($)를 먼저 작성하고 변수 이름을 넣는다.
재사용할 값이면 어떠한 값이든 변수화할 수 있으며 변수에 리스트와 맵을 저장할 수도 있다. (리스트 저장 예시는 아래 $brand-border 참고)
맵(map)이란? 엑세스 할 수 있는 이름을 가진 항목의 목록.
기존에 $primary-color라는 변수로 저장했는데 색상을 여러개 저장하고 싶다고 가정하면 키와 값의 쌍을 변수에 저장할 수 있다.($colors참고)
괄호 내에 키:값을 작성하고 쉼표로 구분해서 추가한다.
// $primary-color: #FFFFFF;
$brand-padding: 8px;
$colors: (primary: #FFFFFF, secondary: #EEEEEE, warning: #FEFEFE)
// $brand-border: 0.05rem solid $primary-color;
$brand-border: 0.05rem solid map-get($colors, primary);작성한 map에서 값을 가져올땐 map-get()함수를 사용한다.
map-get()함수는 첫번째 인자로 map 이름, 그리고 두번째 인자로 가져올 값이 저장된 키를 받는다.
사칙연산 사용 가능
사이즈 같은 경우는 같은 값 재사용도 있겠지만 기본값을 기준으로 계산을 통해 사용하는 경우가 많다. 그런 경우에 사칙연산을 사용할 수 있다.
$default-size: 1rem;
.container {
padding: $default-size * 3 0;
}빌트인 함수
map-get()과 같은 것들
투명도를 조정하는 함수도 있다. lighten(컬러, 투명도%) 해당 함수는 브랜드 컬러에 따라서 투명도를 변경해야 하는 경우에 적절하다.
- 빌트인 모듈 자세히 알아보기
import와 파일 분할
여러 css파일은 @import를 통해서 할 수 있다.
@import "filename.scss";파일 분할은 _로 시작하는 파일명을 만들면서 가능하다.
변수를 별도의 파일로 관리하면 좋겠지. 그래서 변수 파일(_var.scss)을 만들어준 뒤 기존 파일의 변수들을 별도로 붙여넣는다.
이후 파일 임포트를 통해서 사용할 수 있다.
여러 개의 scss파일을 import한 뒤 컴파일하면 하나의 css 파일만이 생성된다. 즉, 초기 http 요청을 줄여볼 수 있다.
상속 활용하기
유사한 스타일을 가지고 있는 요소의 경우는 공통 스타일을 하나의 클래스로 만들고 이를 상속하게 하는 방식을 사용할 수 있다.
@extend .newclassName; 을 통해서 기존 코드에 클래스 상속을 구현한다.
.common {
// common css code
}
.section {
@extend .common;
// something here
}
.part {
@extend .common;
// something here
}믹스인 활용하기
재사용할 수 있는 사용자 지정 함수이다.
함수니까 인자를 전달해서 동작을 커스텀할 수 있다는 장점이 있겠지.
@mixin으로 생성하고 @include로 가지고 와서 사용한다.
일단 간단한 것부터 해보자.
1. 재사용할 코드 스니펫 믹스인으로 만들기
@mixin reusable() {
// reusable css code
}
.somewhere {
@include reusable();
// blah blah
}2. 전달하는 값에 따라 동작 정의
@mixin media-min-width($width){
@media (min-width: $width){
font-size: 125%
}
}width에 어떤 값이 전달되느냐에 따라 동적으로 내부 font-size를 적용할 수 있다.
3. @content 활용하기
위의 예제에서 전달받는 width에 따라 font-size를 적용하는 경우도 있고, width를 동적으로 적용하는 경우 등 다양한 경우가 있을 것이다.
그럼, 믹스인 함수 내의 동작을 하드코딩으로 정의하지 않고 그때 그때 다르게 설정하게끔 @content를 작성해준다.
@mixin media-min-width($width){
@media (min-width: $width){
@content;
}
}
html {
// something here
@include media-min-width(40rem){
font-size:125%
}
}
.section {
// something here
@include media-min-width(40rem){
width: 30rem;
}
}믹스인은 잘만 쓰면 꽤나 쓸 것 같다.
사실 컴파일을 또 해야 하는 부분에 있어서 쓸 생각조차 안하고 있었는데 --watch 커맨드로 나름 실시간 컴파일이 되는 걸 경험하고 나니 안쓸 건 아닌 듯.
다음에 간단하게 만들어 볼 애플리케이션에서는 SCSS 한 번 써…볼까는 한다.
(근데 tailwind에 길들여져버렸다🥲)
