이번에는 처음으로 SASS를 이용한 반응형 웹 퍼블리싱을 경험해 보았다.
CSS만 쓰다 SASS를 쓰니 SCSS도 있길래 도대체 뭐지 싶어서
CSS vs SASS vs SCSS 가 각각 무엇인지 비교해보려고 한다.
CSS
Cascading Style Sheets
우리가 알고 있는 일반적인 스타일링을 위해 사용되고 있는 마크업 언어이다.
개인 스타일이나 회사의 컨벤션에 따라 인라인 또는 블록 형태로 작성한다.
* 한줄 형태의 css 작성법
.inner {background: #f5f7f9; padding: 120px;}
.inner .section {margin: 0 auto; max-width: 1440px;}
.inner .section .title {font-size: 34px; font-weight: 600; color: #333; text-align: center; letter-spacing: -0.02em; padding-bottom: 40px;}* 블록 형태의 css 작성법
.inner {
background: #f5f7f9;
padding: 120px;
}
.inner .section {
margin: 0 auto;
max-width: 1440px;
}
.inner .section .title {
font-size: 34px;
font-weight: 600;
color: #333;
text-align: center;
letter-spacing: -0.02em;
padding-bottom: 40px;
}SASS (SCSS)
Syntactically Awesome Style Sheets
SASS(SCSS)는 CSS 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어이다.
💡 CSS 전처리기(Preprocessor) 언어란?
CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문등의 연산이 가능해서 개발자라면 유연하게 개발 및 유지보수하는데 도움을 준다.
신기한건 이 전처리기기는 직접 동작시키는게 아니다!
전처리기 언어로 편하게 작성하고 css를 컴파일해서 웹으로 동작시킨다고 생각하면 된다.
(마치 TS를 작성후 컴파일해서 JS 파일로 변경되는 것과 같다고 생각하면 된다.)
그러므로 SASS는 CSS의 대체 언어라고 생각하면 안된다!
가장 좋은건 역시 코드를 비교해보는게 좋겠다. 😁
아래 코드는 위에서 작성한 CSS를 SASS로 작성한 코드이다.
.inner {
background: $inner-color;
padding: 120px;
.section {
margin: 0 auto;
max-width: 1440px;
.title {
font: {
size: 34px;
weight: 600;
}
color: $text-color;
text-align: center;
letter-spacing: -0.02em;
padding-bottom: 40px;
}
우선 가장 눈에 띄는 부분들이 몇개 있는데,
1. 변수 사용
기존 CSS도 :root를 이용해서 주 색상이라던가 폰트, 자주 쓰는 스타일들을 모아서 저장해 둘 수 있는데, SASS에서도 변수를 사용할 수 있도록 지원한다.
심지어 변수 스코프 및 재할당도 가능하다는 사실!
보통은 이렇게 variables.scss 라는 파일에 변수를 담아서 공통으로 관리한다.
자주 사용되는 컬러(메인,서브 같은), 폰트, 공통 속성, 반응형 중단점을 넣어 사용한다.
그리고 필요한 변수는 해당 파일에서 @import (모듈화)를 통해 연결 후 꺼내 쓸 수 있다.
이때 변수는 $(달러사인)을 붙여서 사용하면 된다.
2. 선택자 중첩(Nesting)
<section class="wrap">
<h3 class="title">리스트</h3>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>
</section>만약 위와 같은 구조의 li에 스타일을 지정하려고 한다면
.wrap .list li {text-decoration: underline;}
.wrap .list li:hover {transform: scale(1.1);}
.wrap .list li:nth-child(1) {color: #111;}
.wrap .list li:nth-child(2) {color: #222;}
.wrap .list li:nth-child(3) {color: #333;}
.wrap .list li:nth-child(4) {color: #444;}
.wrap .list li:nth-child(5) {color: #555;}위와 같이 선택자를 타고 타고 들어가서 결국 길어지기 마련이다...
(물론 위 코드는 굉장히 짧은 편이지만 뎁스가 길어지면 그만큼 복잡하고 최악이다. 🤔)
하지만 선택자 중첩을 통해 코드를 굉장히 간편하게 작성할 수 있게 된다!
.wrap {
.list {
.li {
text-decoration: underline;
&:hover {
transform: scale(1.1);
}
&:nth-child(1) {
color: #111;
}
&:nth-child(2) {
color: #222;
}
&:nth-child(3) {
color: #333;
}
&:nth-child(4) {
color: #444;
}
&:nth-child(5) {
color: #555;
}
}
}
}3. 조건문 & 반복문, Mixin(함수), Extend(확장) & Inheritance(상속) 가능
JS 처럼 CSS에 유용한 기능들을 제공한다.
특히 조건문 & 반복문, Mixin(함수)는 정말 한줄기의 빛 같은 존재다... 💖
예시로 간단하게 if문과 for문을 이용한 작성법을 정리해 봤다.
* if 문
$width: 1440px;
div {
width: if($width > 368px, $width, null); // div는 1440px이 된다.
}@function size($size){
@if $size >= 1024px {
@return 1440px;
} else {
@return 0px;
}
}
div {
width: size(1300px); // width: 1440px이 된다.
height: size(200px); // height: 0px이 된다.
}* for 문
@for $i from 1 through 100 {
.p-#{$i} {
padding: #{$i}px;
}
}위 코드를 컴파일하면 아래와 같이 자동으로 반복해서 생성해 준다.
.p-1 {
padding: 1px;
}
.p-2 {
padding: 2px;
}
/* 나머지 중간 생략 */
.p-99 {
padding: 99px;
}
.p-100 {
padding: 100px;
}
이 밖에도 다양한 기능들이 있어서 많이 사용해보면서 익숙해지면 빠르게 스타일을 적용할 수 있을 것 같다는 장점이 느껴진다.
특히 JS를 공부해 본 사람이라면 크게 어렵지 않을테니 사용해보는 것을 추천한다!
