오늘은 SCSS
에 대해 배워보자
SCSS
는 기본적으로 CSS preprocessor
다
그말은 scss
를 compile
해서 css
처럼 만든다는 얘기다
scss
는 점점 업계의 표준이 되어가고있고 css
에는 없는 너무 좋은 것들이 많아 마치 css
를 programming language
처럼 만들어 준다
하지만 scss
는 생각보다 사용하기가 쉽지 않다
왜냐하면 complie
하거나 build
하는 단계가 필요하기 때문이다
그래서 그 진입장벽에서 고통받는 사람들을 위해 이렇게 글을 남긴다
scss
를 기본적인 사용법을 이해하기 쉽게 풀어볼텐데 이를 위해 기본적으로 node.js
와 npm
이 설치되어 있고 gulp
와 node.js
에 대한 기본지식이 있다는 가정하에 진행하겠다
확인은 terminal에서
node -v
,npm -v
로 version을 확인해보면 된다
먼저 우리가 할 것은 Nomadcoders github에 접속해서 scss-masterclass
repository의 code를 다운로드 하는 것이다
다운로드 후 VS Code(혹은 다른 IDE)로 해당 폴더를 open한 후 terminal을 열여서
yarn dev //혹은 npm run dev
를 입력하게되면 굉장히 많은 오류들이 뜰 것이다
이유는 gulpfile.bable.js
상단에 보면 많은 module들이 import되어 있는데 우리의 컴퓨터에는 이 module들이 설치되어 있지 않아서 오류가 발생하는 것이다
terminal에
npm i
를 입력하여 필요한 module들을 설치하도록 하자
설치를 마치고 gulpfile.bable.js
를 보면
const routes = {
css: {
watch: "src/scss/*",
src: "src/scss/styles.scss",
dest: "dist/css"
}
};
src
주소의 파일이 compile
되어 css
파일이 되는 것이다
그러니 여기서는 styles.scss
가 compile
되어 dest
경로에 styles.css
가 생성된다는 의미이다
이렇게 compile
하는 이유는 browser는 scss
를 이해하지 못하기 때문이다
이제 scss
에 대해 자세히 알아보자
먼저 src/scss
경로에 _variables.scss
를 만들어주자
이름에 왜
_(underscore)
가 붙는가?_
를prefix
로 사용하면 이 파일들은compile
과정에서 제외된다! 쉽게 말해서compile
되길 원치 않는 파일들에게_
를 붙여주면 된다는 말이다
이제 원하는 변수를 만들어보도록 하자
$bg: #e7473c;
이런 식으로 변수의 이름앞에 $
를 붙이고 원하는 값을 지정해주면 된다
그리고 sytles.scss
에서 @import "_variables";
로 해당 변수를 불러온 다음
body {
background-color: $bg;
}
이런 식으로 사용하면 된다
nesting
은 우리가 타겟하는 element를 좀 더 정확하게 해준다
예를들면
<h2>title</h2>
<div class="box">
<h2>another title</h2>
</div>
이라고 있을 때
.box h2 {
color: blue;
}
css
라면 위와 같은 방식으로 작성할 것이다 그리고 이 방법도 나쁜방법은 아니다
하지만 점점 더 많은 양을 작성하다보면 작성한 위치를 찾는 번거로움을 한번쯤은 느껴봤으리라 믿는다
만약 같은 부모를 같는 element들끼리 묶여있다면 얼마나 가독성이 좋고 작성하기 편할까?
이를 해결해준 것이 scss
다
위의 css
를
.box {
h2 {
color: $bg;
}
}
이런 식으로 작성할 수 있다
.box
안에 있는 h2
에 styling을 한 것이다
html
의 양이 많아진다면
.box {
&:hover {
background-color: $black;
}
h2 {
color: $bg;
font-size: 14px;
text-align: center;
}
button {
background-color: $main;
}
}
위와 같은 식으로 작성하면 될 것이다
&
는 부모요소를 의미하여 여기서는.box
를 의미한다
의미도 굉장히 명료해져 가독성도 좋아지고 작성하기도 편해졌다 이게 scss
의 힘이다
이번에는 mixins
에 대해 배워보자
mixins
은 scss functionality
를 재사용 할 수 있도록 해준다
무슨 말인지 이해하기 쉽도록 같이 사용해보도록 하자
먼저 src/scss/_mixins.scss
라는 파일을 하나 만들어보자
@mixin goodTitle {
color: blue;
font-size: 30px;
margin-bottom: 20px;
}
_mixins.scss
에 위와 같이 작성하고 styles.scss
에서 @import "_mixins";
한 후
<h2>title</h2>
에
h2 {
@include goodTitle();
}
라고 해주면 h2
에 goodTitle
에 들어있던 것들이 적용되는 것을 볼 수 있다
근데 여기까지만보면 그렇게 유용해 보이지 않고 함수같아 보이지도 않는다
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
위와 같이 markup 되어있는 상태에서 위 링크들이 비슷한 스타일링에서 조금씩만 차이를 갖길 원한다면
@mixin link($color) {
text-decoration: none;
display: block;
color: $color;
}
라고 _mixins.scss
에 작성해 준 후
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link(blue);
}
&:nth-child(even) {
@include link(red);
}
}
라고 styles.scss
에 작성해주면 홀수, 짝수번째에 다른 color
를 주면서 공통적으로 같은 margin-bottom
을 줄 수 있다
mixins
의 활용도는 무궁무진하다
@mixin link($word) {
text-decoration: none;
display: block;
@if $word == 'odd' {
color: blue;
} @else {
color: red;
}
}
_mixins.scss
a {
margin-bottom: 10px;
&:nth-child(odd) {
@include link('odd');
}
&:nth-child(even) {
@include link('even');
}
}
styles.scss
위와 같이 마치 프로그래밍 언어를 사용하듯이 작성하여도 잘 작동하는 것을 볼 수 있다
그럼 이제부터 extends
에 대해 알아보도록 하자
mixins
은 상황에 따라 다르게 코드를 작성하기 위해 사용하는 것이였다면
extends
는 같은 코드를 중복하고 싶지 않을때 사용한다
<a href="#">Log In</a>
<button>Log Out</button>
예를들어 위의 a
와 button
이 둘이 똑같이 보이게 만들어 보고 싶다고 가정해보자
그러기 위해 일단 src/scss/_button.scss
를 만들고
%button {
font-family: inherit;
border-radius: 7px;
font-size: 12px;
text-transform: uppercase;
padding: 5px 10px;
background-color: peru;
color: white;
font-weight: 500;
}
위와 같이 작성해준 후 styles.scss
에
@import "_button";
a {
@extend %button;
text-decoration: none;
}
button {
@extend %button;
border: none;
}
라고 작성해주면 a
와 button
이 굉장히 비슷해졌음을 알 수 있다
이번엔 Mixins
을 이용하여 responsive web
을 만들어보도록 하자
먼저 index.html
에 <h1>Hello</h1>
라고 작성해 준 후
$minIphone: 500px;
$maxIphone: 690px;
$minTablet: $minIphone + 1;
$maxTablet: 1120px;
@mixin responsive($device) {
@if $device == 'iphone' {
@media screen and (min-width: $minIphone) and (max-width: $maxIphone) {
@content;
}
} @else if $device == 'tablet' {
@media screen and (min-width: $minTablet) and (max-width: $maxTablet) {
@content;
}
} @else if $device == 'iphone-l' {
@media screen and (min-width: $minIphone) and (max-width: $maxIphone) and (orientation: landscape) {
@content;
}
}
}
_minxins.scss
에 위와 같이 작성해 준 후 styles.scss
에
@import "_mixins";
h1 {
color: red;
@include responsive("iphone") {
color: yellow;
}
@include responsive("iphone-l") {
font-size: 60px;
}
@include responsive("tablet") {
color: green;
}
}
위와 같이 작성해주면 width
가 변화함에 따라 다른 스타일링을 적용할 수 있다
물론 css
에도 @media
가 있지만 scss
에서는 @content;
를 통해 style block
을 전달해 줄 수 있고 좀더 프로그래밍 언어 같은 느낌으로 작성할 수 있다
가장 중요한 건 mixins
는 library
가 존재하는데 Bourbon을 추천한다
이제 우린 기본적인 scss
에 대한 지식을 얻게 되었다
얻은 지식을 보존하고 발전하는 건 좀 더 많은 연습이라는 걸 잊지말고 자신이 원하는 걸 만들어 나가길 바란다👍
reference
Nomadcoders CSS Master Class
Nomadcoders Gulp
Heropy Tech blog