[React] sass/scss를 알아보자

MinJae·2024년 10월 22일

React

목록 보기

12/21

SASS란?

우리는 HTML에 스타일을 부여하기 위해 CSS를 사용하지만, 수많은 id, class, 선택자 등을 사용하다 보면 CSS 파일이 매우 복잡해져 가독성이 떨어질 수 있습니다. 이때 CSS 전처리기인 SASS를 사용하면 CSS 코드를 더 구조적으로 작성할 수 있습니다. 마치 HTML과 비슷한 방식으로 스타일을 관리할 수 있게 되어, 코드를 분석하거나 수정할 때 훨씬 효율적입니다.

SCSS란?

SCSS는 SASS에서 발전된 문법이며, 기존 CSS 문법과 더 유사한 구조를 가지고 있습니다. 때문에 기존 CSS 사용자들이 좀 더 쉽게 적응할 수 있어, SASS보다 SCSS 사용이 더 권장됩니다.

SASS와 SCSS의 차이

SASS 사용 예시:

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

SCSS 사용 예시:

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

SASS는 중괄호 및 세미콜론을 사용하지 않는 반면, SCSS는 중괄호와 세미콜론을 포함합니다. 따라서 SCSS가 한눈에 구조를 파악하는 데 더 유용합니다.

SCSS를 사용하기 위해 npm install sass 명령어로 설치가 필요합니다.

SCSS의 변수 사용법

SCSS에서는 $ 기호를 사용해 변수를 선언할 수 있습니다. 변수를 사용하면 중복되는 값을 한 곳에서 관리할 수 있어, 유지보수나 스타일 업데이트가 훨씬 쉬워집니다. 변수를 활용해 색상, 폰트 크기, 간격 등 다양한 값을 저장하고 재사용할 수 있습니다.

$primary-color: #3498db;
$font-size-large: 24px;
$spacing-small: 8px;

.button {
  background-color: $primary-color;
  font-size: $font-size-large;
  padding: $spacing-small;
}

각각의 스타일 값들을 변수로 선언했습니다. 이후에 해당 변수들을 사용하면 여러 곳에서 동일한 값을 일관성 있게 적용할 수 있습니다.

변수를 사용하면 스타일의 일관성과 효율성을 크게 높일 수 있습니다.

SCSS의 중첩 규칙 이해 및 활용

SCSS는 선택자 간의 중첩을 허용해, 코드가 HTML 구조와 더 유사하게 작성될 수 있습니다. 이 방식은 CSS 코드의 가독성과 유지보수성을 높여줍니다. 중첩을 사용하면 부모-자식 관계의 스타일을 직관적으로 표현할 수 있습니다.

.navbar {
  background-color: #333;
}
.navbar .navbar-item {
  color: white;
}
.navbar .navbar-item:hover {
  color: yellow;
}

위의 코드를 중첩 규칙을 사용하여 작성해보겠습니다.

scss 중첩 활용 예시

.navbar {
  background-color: #333;
  
  .navbar-item {
    color: white;
    
    &:hover {
      color: yellow;
    }
  }
}

& 기호를 사용하면 부모 선택자를 참조할 수 있습니다. 이 기능은 :hover, :focus 등의 상태 선택자를 작성할 때 유용합니다.

중첩 규칙을 활용하면 코드의 가독성 향상, 코드 간결화 그리고 유지보수성 향상이 됩니다.

SCSS 믹스인의 이해 및 활용

SCSS 믹스인은 CSS 코드의 일부분을 재사용할 수 있게 해주는 기능입니다. 특정 스타일을 여러 곳에서 반복해서 사용해야 할 때, 믹스인을 활용하면 코드 중복을 줄이고 효율적으로 관리할 수 있습니다. 또한, 인자를 받을 수 있어 유연한 스타일링이 가능합니다.

믹스인 활용 예시

@mixin button-style {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  background-color: blue;
}

.button {
  @include button-style;
}

.secondary-button {
  @include button-style;
  background-color: gray;
}

@mixin으로 정의한 뒤 @include를 사용해 해당 스타일 재사용이 가능합니다. 이렇게 하면 동일한 스타일을 여러 요소에서 적용할 수 있어 중복을 피할 수 있습니다.

인자를 사용하는 믹스인 예시

@mixin button-style($bg-color, $text-color) {
  padding: 10px 20px;
  border-radius: 5px;
  color: $text-color;
  background-color: $bg-color;
}

.button {
  @include button-style(blue, white);
}

.secondary-button {
  @include button-style(gray, black);
}