SCSS 개념 정리

리액트 기초 강의가 마무리되고 리액트 심화를 배울 줄 알았는데 갑자기 SCSS??? 강의가 나타났다.

자주 사용이 되는 만큼 정리해 보자!

 

1. SCSS의 변수 사용법

css를 사용하다 보면 여러 곳에서 같은 값을 받는 경우가 있다.

div {color: red;}
p {color: red;}
span {color: red;}

이 처럼 각각의 태그에서 color: red를 적용해 주고 있다.

 

$color-red: red;

div {color: $color-red}
p {color: $color-red}
span {color: $color-red}

변수를 선언하고 사용하는 방법은 간단하다.

우선 $를 사용하고 그 뒤에 선언명을 입력한다. 그리고 : 다음에 원하는 값을 입력하면 된다.

 

이렇게만 보면 이걸 언제 사용하나 할 수 있다.

그리고 그냥 컬러를 명시하는 게 낫지 타이핑이 더 오래 걸리는 변수명으로 왜 하는지 의문일 수 있다.

하지만 이것은 유지보수를 위한 장점이 있다는 걸 알아한다.

작업을 하면서 여러 가지 페이지에 css를 적용하다 보면 배경색과 폰트 컬러에 대한 입력이 상당히 많은 것을 알 수 있다.

만약 여기서 디자인적으로 컬러가 변경되었을 때 변수명으로 선언하지 않았다면 모든 css에 모든 적용된 색상을 찾아다니면서 전부 다 고쳐야 하는 상황이 온다. 어디에 적용되어 있는지 모르는 이 코드를 찾는 것도 일이며 이걸 또 하나하나 고치는 것도 일이다.

그래서 변수명으로 설정해 두고 컬러에 변수를 가져다 사용했을 때 수정이 발생하더라도 변수에 있는 색상을 바꿔주면 끝나는 일이기 때문에 다크모드나 아이덴티티컬러가 수정 됐을 때 매우 유용하다.

 또 컬러뿐만이 아니라 폰트사이즈나 여백 같은 곳에서도 수치를 입력해서 이용하면 매우 편하다.

 

2. SCSS의 중첩 규칙

 *****css
<style>
.box {
  padding: 20px;
  background-color: red;
}
.box ul {
  background-color: lightblue;
}
.box ul li {
  color: white;
}
.box ul li:first-child {
  color: red;
}
.box ul li span {
  color: blue;
}
</style>

*****HTML
<div class="box">
  <ul>
    <li>안녕하세요.</li>
    <li>
      반갑습니다.
      <span>하하</span>
    </li>
  </ul>
</div>

대충 이런 상황이 있다고 가정해 보자.

css로 작성을 했을 때는 box라는 클래스부터 하나하나 쭉 따라가야 하기 때문에 코드 줄이 길어진다.

 

.box {
  padding: 20px;
  background-color: red;
  ul {
    background-color: lightblue;
    li {
      color: white;
      &:first-child {
        color: red;
      }
      span {
        color: blue;
      }
    }
  }
}

CSS를 SCSS로 바꿨다. 코드 줄 수가 확연히 줄었다. box클래스를 기점으로 안에서 이루어지기 때문에 다른 곳에서 클래스가 중복된다 해도 첫 클래스만 잘 잡아준다면 css가 중복으로 적용되는 일은 사라진다.

이렇게 중첩 규칙을 사용하면 가독성도 높아지고 수정이 필요한 상황일 때도 작업자가 코드를 찾아다니는 시간이 많이 줄어드는 장점이 있다.

 

3. SCSS의 Mixin & include

CSS를 작성하다 보면 UI의 정렬을 위해 display: flex를 아주 많이 사용한다.

나도 정렬을 위함이라 하면 다른 css가 있음에도 불구하고 flex를 우선으로 사용한다. 반응형까지 생각하기 위함이라고 보면 되겠다.

하지만 display:flex는 같이 혼합해서 써야 하는 코드들이 꽤 많다. 대표적으로 align-items, justify-content, flex-direction, flex-wrap, gap 등등이 있다.

flex를 많이 쓰긴 하지만 ui의 형태가 다 똑같은 건 아니니 매번 flex를 쓰고 같이 따라오는 코드들을 매번 설정해 주는 것도 사실 좀 귀찮은 게 사실이다.

이건 SCSS의 mixin과 include로 귀찮음을 덜어줄 수 있다.

*****scss
<style>
.box {
  ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
  }
}
</style>

****HTML
<div class="box">
  <ul>
    <li>
      <p>이름: 홍길동</p>
      <p>나이: 19</p>
      <p>성별: 남</p>
    </li>
    <li>
      <p>이름: 김철수</p>
      <p>나이: 17</p>
      <p>성별: 남</p>
    </li>
  </ul>
</div>

ul과 li에는 둘 다 display: flex가 들어가 있다

이걸 mixin과 incluede를 이용해서 코드를 줄여보자.

 

@mixin flex($direction: row, $align: start, $justify: start, $wrap: nowrap, $gap: 0){
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  flex-wrap: $wrap;
  gap: $gap;
}

.box {
  ul {
    @include flex($direction: column, $gap: 20px);
    li {
      @include flex($align: center, $justify: space-between, $gap: 10px);
    }
  }
}

현재 SCSS코드 상으로는 후자가 더 길어 보이긴 하자만 여러 페이지에서 사용될 것을 생각하면 아주 유용한듯하다.

그리고 mixin에서 사용될 코드들을 include에서 원하는 것만 사용하는 것을 대비해 mixin에서 각각의 값에 기본적으로 들어가는 값을 입력했다.

 

이렇게 SCSS에 대해 간략하게 알아보았다.

사실 변수와 중첩 사용에 대해서는 알고 있었지만 오래간만에 써보는 거라 다시 한번 배울 수 있어서 좋았고 mixin과 include는 오늘 처음 알았던 건데 너무 남발하면 중후반부에 작업할 때 헷갈릴 수 있을 것 같으니 차차 익숙해지면서 사용해 나가면 나중에 매우 편리할 것으로 예상된다.