[SASS] SASS를 쓰는 이유

sass

Sass는 CSS를 간편하게 작성하고 관리하기 위한 CSS 전처리기입니다. 다음은 Sass를 사용하는 이유에 대한 몇 가지 이유입니다.

1. 변수 사용 Sass는 변수를 사용할 수 있습니다. 이것은 CSS 코드에서 동일한 값이 여러 번 반복되는 경우 유용합니다. Sass 변수를 사용하면 이러한 값을 한 곳에서 정의하고 변경할 수 있습니다.

예시:

$primary-color: #007bff;
.btn-primary {
background-color: $primary-color;
}

1. 중첩 구조
   Sass는 중첩 구조를 지원합니다. 이것은 HTML과 비슷한 구조로 CSS를 작성할 수 있다는 것을 의미합니다. 이것은 가독성을 높이고, 유지 보수를 쉽게 만듭니다.

예시:

 

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      a {
        text-decoration: none;
      }
    }
  }
}

1. Mixin 사용
   Sass는 Mixin이라고 불리는 코드 재사용 방법을 지원합니다. Mixin을 사용하면 코드를 한 번 작성하고 필요할 때마다 호출하여 재사용할 수 있습니다.

예시:

 

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box {
  @include transform(rotate(30deg));
}

1. 함수 사용
   Sass는 함수를 사용할 수 있습니다. 이것은 Sass 코드에서 수학 계산을 수행하거나 문자열을 조작하는 등의 작업을 수행할 수 있습니다.

예시:

@function grid-width($columns) {
  @return $columns * $grid-width + ($columns - 1) * $gutter-width;
}

1. 쉬운 유지 보수
   Sass를 사용하면 코드를 모듈화하고, 재사용 가능한 코드 블록을 생성하고, 코드를 더 쉽게 유지 보수할 수 있습니다. 또한, Sass를 사용하면 CSS 코드를 더 쉽게 읽을 수 있으며, 코드를 이해하기 쉽고 수정하기 쉽습니다.

이러한 이유들 때문에 Sass는 CSS 작성을 효율적으로 하고, 더 나은 코드 관리를 가능하게 하여, 개발자들에게 인기있는 CSS 전처리기 중 하나입니다.

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets