[코딩온] 프론트엔드 입문 Day 45~46 (Sass with React)

지난 포스팅에 이어서, 이번 포스팅에서는 SASS에 대해 설명하려고 한다.

---

SASS

Syntactically Awesome Style Sheets.

이전 포스팅에서 잠깐 설명한 것처럼, CSS 전처리기 종류 중 하나로서 기존의 복잡했던 CSS 작업을 보완하여, 스타일링 코드의 재활용성과 가독성을 높여주고 유지/보수도 쉽게 해준다.

SASS에는 .sass와 .scss라는 두 가지의 확장자가 존재하고, 아래 사진처럼 작성법이 다르다.

sass 확장자는 들여쓰기와 줄바꿈으로 스타일을 정의하고, scss 확장자는 CSS 파일처럼 중괄호와 세미콜론을 사용한다.

sass, scss 확장자 모두 변수를 선언할 때는 $ 기호를 앞에 붙여줘야 한다.

SASS 기능을 사용하려면 터미널에서 아래 명령어로 설치해야 한다.

$ npm install sass

💡 sass 확장자와 scss 확장자의 차이
처음에는 sass 확장자만 존재했다. 그러나 줄바꿈, 들여쓰기, 띄어쓰기만 하면 선언이 종료되는 문법을 가지고 있어서 Error가 발생되는 경우가 많았고, SASS라는 스타일링 기법의 3버전에서 scss 확장자가 등장했다.
scss 확장자는 기존 CSS와 비슷한 문법을 사용하는, CSS와 완전히 호환이 가능한 '상위 호환 스타일시트'이다.

---

SASS 사용하기

/* 1. 변수에 저장해서 사용하기 */
$color-main: #6cd1fd;
$boxShadow: 2px 2px 6px gray;
$mobile: 700px;

.sass-var {
  background-color: $color-main;
  box-shadow: $boxShadow;
}
.sass-var2 {
  color: $color-main;
}

@media screen and (max-width: $mobile) {
  .sass-var2 {
    background-color: black;
  }
}

1. 변수에 저장해서 사용하기

디자인 시스템에 등록해서 반복적으로 사용할 색상, 글자 크기, 여백 등은 변수에 저장하여 사용한다.

위 코드에서는 메인으로 사용될 컬러, boxShadow, 미디어쿼리 크기를 변수에 담았다.

---

/* 2. 연산하기 */
.sass-calc {
  width: 500px - 80px;
  height: calc(50vh - 180px);
  border: 5px solid yellow;
}

2. 연산하기

단위가 같으면 자동으로 계산되고, 단위가 다르면 calc()를 사용해야 한다.

---

/* 3. 중첩하기 */
// .sass-div1 > .sass-div2 > .sass-div3

.sass-div1 {
  border: 5px solid pink;
  padding: 50px;

  .sass-div2 {
    border: 5px solid skyblue;
    padding: 10px;

    .sass-div3 {
      background-color: burlywood;
      width: 50px;
      height: 50px;
    }
  }

  &:hover {
    border: 5px solid red;
  }
}

3. 중첩하기

함수형 컴포넌트 return문 내부의 태그가 중첩이 되어있는 상태여서 scss 파일에서도 중첩해서 작성했다.

가상클래스 hover는 div1을 의미한다.

---

/* 4. mixin - scss 에서 사용하는 함수 */
@mixin bold-border() {
  border: 10px solid black;
}

// 매개변수를 받아 재사용성 높이는 방법
@mixin add-border($borderWidth, $bordercolor) {
  border: $borderWidth $bordercolor solid;
}

// 매개변수에 기본값 설정
@mixin add-border2($borderWidth: 5px, $bordercolor: yellow) {
  border: $borderWidth $bordercolor solid;
}

// 자주 사용하는걸 이렇게 담아서 include로 사용하면 훨씬 편리해짐
@mixin default-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sass-mixin {
  width: 100px;
  height: 100px;
  background-color: aliceblue;
  // border: 10px solid black;
  // @include bold-border();

  @include add-border(8px, green);

  // @include add-border2(15px);

  // 협업 시에는 해당 mixin이 어떤 스타일링인지 작성해주는 것이 좋음
  @include add-border2($bordercolor: yellow, $borderWidth: 15px);
}

4. mixin (믹스인)

같은 스타일을 여러 번 반복해서 사용할 수 있게 해주는, SASS에서 사용하는 함수이다.

미리 지정한 매개변수를 인자로 받아서 사용하면, 재사용성이 훨씬 높아진다.

@mixin으로 선언한 스타일링은 @include로 불러오면서 매개변수에 어떻게 스타일링할지 값을 넣는다.

---

/* 5. 확장과 상속 */
.sass-btn {
  border: 1px solid black;
  border-radius: 5px;
  font-size: 30px;
  cursor: pointer;
}

.sass-btn-extends {
  @extend .sass-btn;
  background-color: tomato;
}

.sass-for-container {
  border: 1px solid black;
  height: 100px;
  
  div:nth-child(1) {
    background-color: pink;
    width: 100px;
    height: 100px;
  }
  div:nth-child(2) {
    background-color: blue;
    width: 120px;
    height: 100px;
  }
  div:nth-child(3) {
    background-color: black;
    width: 140px;
    height: 100px;
  }
}

5. 확장과 상속

미리 지정해둔 스타일링을 다른 선택자에서 상속받을 수 있다.

위 코드에서는 sass-btn이라는 선택자로 스타일링된 내용이 sass-btn-extends에서 @extend 키워드를 통해 상속되었다.

sass-for-container 선택자의 경우에는 SASS 컴포넌트에서 해당 선택자 아래에 3개의 박스가 속해있었고, 이걸 nth-child로 스타일링하면 오른쪽 사진과 같은 결과가 나온다.

---

6. for, if문 사용하기

/* 6. for, if문 사용하기 */

// for문
.sass-for-container {
  border: 1px solid black;
  height: 100px;

  @for $i from 1 through 3 {
    div:nth-child(#{$i}) {
      background-color: pink;
      height: 100px;
      width: (80px + 20px * $i);
    }
  }
}

먼저 for문에서는 #{}를 사용해서 코드의 어디에서든 변수를 사용할 수 있도록 해주었고, 이걸 '문자 보간법(補間, interpolation)'이라고 한다. 보간법은 문자 사이, 혹은 계산이 안 되는 곳에 변수를 넣어야 할 때 사용한다.

위 코드에서는 i라는 변수를 width의 계산식에서 사용하기 위해 nth-child의 매개변수로 보간법을 적용한 변수를 넣었다.

※ 보간법 쉬운 설명 - https://nykim.work/111

// if문
@mixin useIf($bgcolor: #fff) {
  background-color: $bgcolor;

  @if ($bgcolor == #000) {
    color: #fff;
  } @else {
    color: #000;
  }
}
.sass-use-if {
  @include useIf($bgcolor: #000);
}

SASS의 if문 같은 경우에는 JS에서의 if문과 유사하다.

위 코드에서는 @mixin으로 스타일링하며 if문을 사용했고, @mixin으로 선언한 스타일링을 @include로 사용했다.

---

SASS Import

@import "styles/main.scss"

스타일링의 기본적인 설정을 utils.scss 파일에 담아서 불러오는 방식을 사용하면 유지/보수가 편리하다.

불러오는 방법은 위 코드처럼, @import 키워드 뒤에 폴더/파일명을 작성하면 된다.

scss 확장자 외에 css 파일도 가능하고, 확장자 없이 파일명만 작성해도 알아서 불러와서 실행된다.

수업 시간에 실험했던 예시 코드를 살펴보자.

/* _utils.scss */

// color 변수
$color-main-util: rgb(248, 122, 143);
$color-main-light: rgb(255, 215, 215);
$color-gray: #8d8d8d;
$color-light-gray: #d2d2d2;
$color-dark-gray: #454545;

// mixin
@mixin btn($bgcolor) {
  padding: 10px;
  border: 1px solid black;
  display: inline-block;
  box-sizing: border-box;

  background-color: $bgcolor;
  @if $bgcolor==$color-main-util {
    border: 1px solid $color-main-light;
    color: #fff;
  } @else if $bgcolor==$color-main-light {
    border: 1px solid $color-main-util;
  } @else if $bgcolor==$color-light-gray {
    border: 1px solid $color-gray;
  } @else {
    border: 1px solid #000;
  }
}

/* sass.scss */
@import 'utils';

.sass-util {
  background-color: $color-main-util;
}
.sass-util-btn {
  @include btn($bgcolor: $color-main-util);
}

/* sass.jsx */
import '../styles/sass.scss';

export default function Sass() {
  return (
    <>
      <div className="sass-util">utils import</div>
      <div className="sass-util-btn">utils btn</div>
    </>
  );
}

• _utils.scss 파일에서 다양한 컬러와 mixin 설정을 했다.
• sass.scss 파일에서 utils를 확장자 없이 import하고, 파일 이름을 따서 선택자명을 짓고 스타일링을 설정했다. sass-util-btn의 경우 mixin으로 선언된걸 불러오기 때문에 @include 키워드로 불러왔다.
• sass.jsx 컴포넌트에서 sass.scss 파일을 import 키워드를 통해 불러오고, return 내부에 브라우저에 보여질 부분을 작성했다.

---

SASS에 대한 내용은 여기까지였다.

조금 어렵다는 생각이 들기도 하지만, scss 확장자의 경우 일반 css랑 똑같이 스타일링하는데 훨씬 편리하게 코드를 작성할 수 있어서 좋은 것 같다. 자주 보면서 익숙해질 수 있도록 해봐야지!