Sass를 활용하여 스타일링하는 방법을 알아봅시다.

Sass는 Css Pre-Processor로 기존 Css의 코드를 획기적으로 줄여줄 수 있습니다. 코드 재사용성이 뛰어나고, 복잡한 작업을 쉽게 할 수 있을뿐더러 가독성도 좋습니다. Sass에서는 두 가지의 확장자(.sass, .scss)를 지원하는 데, 두 파일의 문법이 많이 다릅니다. 하지만 우리 프로젝트에서는 주로 많이 사용되는 scss 문법을 사용하겠습니다. Sass를 사용하기 위해서는 우선 node-sass 라이브러리를 설치해줘야 합니다.

yarn add node-sass

다 설치가 되었다면 PhoneItem.css 파일에 Sass를 적용해보겠습니다.

• src/components/PhoneItem/PhoneItem.scss

.phone_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #495057;
  padding: 20px;

	/* .phone_item > .phone_item_right > button */
  .phone_item_right button {
    color: #fa5252;
    font-size: 15px;
    font-weight: bold;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
  }

	/* .phone_item + .phone_item */
  & + & {
    margin-top: 15px;
  }
}

Sass를 사용하면 위와 같이 스타일 코드를 작성할 수 있습니다. 코드 길이가 길면 길수록 Sass는 더 효과를 발할 것입니다. 자세한 내용은 공식 홈페이지(https://sass-lang.com/documentation)에서 확인해보세요.

Sass도 CSS와 마찬가지로 모듈화가 가능합니다. 한 번 변경해볼까요?

• src/components/PhoneItem/PhoneItem.module.scss (원본 : PhoneItem.css)

.phone_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #495057;
  padding: 20px;

  .phone_item_right button {
    color: #fa5252;
    font-size: 15px;
    font-weight: bold;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
  }

  & + & {
    margin-top: 15px;
  }
}