Basic of SCSS

Prologue

오늘은 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에 대해 자세히 알아보자

Variable

먼저 src/scss경로에 _variables.scss를 만들어주자

이름에 왜 _(underscore)가 붙는가? _를 prefix로 사용하면 이 파일들은 compile과정에서 제외된다! 쉽게 말해서 compile되길 원치 않는 파일들에게 _를 붙여주면 된다는 말이다

이제 원하는 변수를 만들어보도록 하자

$bg: #e7473c;

이런 식으로 변수의 이름앞에 $를 붙이고 원하는 값을 지정해주면 된다
그리고 sytles.scss에서 @import "_variables";로 해당 변수를 불러온 다음

body {
  background-color: $bg;
}

이런 식으로 사용하면 된다

Nesting

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에 대해 배워보자
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

그럼 이제부터 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이 굉장히 비슷해졌음을 알 수 있다

Responsive Mixins

이번엔 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