Post

SCSS) SCSS를 사용하면 좋은 이유

Posted
Preview Image
By parksohyunnn 6 min read

안녕하세요, 코딩을 사랑하는 여러분! 오늘은 CSS 전처리기 중 하나인 SCSS에 대해 깊이 있게 알아보겠습니다. 이 글을 통해 SCSS를 사용하면 좋은 이유, SCSS가 언제 쓰이는지, 그리고 CSS와의 차이점에 대해 설명하겠습니다. 끝까지 함께 해주세요!

SCSS란 무엇인가?

SCSS는 Sassy CSS의 약자로, Sass(Syntactically Awesome Stylesheets)의 한 문법 형식입니다. Sass는 CSS의 확장자로, 스타일시트를 더욱 효율적이고 조직적으로 작성할 수 있게 해주는 전처리기입니다. SCSS는 CSS와 거의 동일한 문법을 사용하면서도 Sass의 강력한 기능을 제공합니다.

SCSS를 사용하면 좋은 이유

1. 중첩 규칙 (Nesting)

SCSS는 중첩을 지원하여 코드의 가독성을 높이고 구조를 명확하게 할 수 있습니다. 이는 HTML의 계층 구조를 스타일시트에서도 쉽게 반영할 수 있게 해줍니다.

1
2
3
4
5
6
7
8
9

.navbar {
  background: #333;
  .nav-item {
    color: #fff;
    &:hover {
      color: #ddd;
    }
  }
}

2. 변수 (Variables)

SCSS는 변수를 지원하여 색상, 폰트 크기 등 재사용 가능한 값을 저장할 수 있습니다. 이를 통해 스타일시트를 더 쉽게 유지보수하고 수정할 수 있습니다.

1
2
3
4
5
6
7

$primary-color: #333;
$secondary-color: #fff;

body {
  color: $primary-color;
  background-color: $secondary-color;
}

3. 믹스인 (Mixins)

믹스인은 재사용 가능한 스타일 조각을 정의하고 삽입할 수 있게 해줍니다. 이를 통해 코드의 중복을 줄이고 유지보수성을 높일 수 있습니다.

1
2
3
4
5
6
7
8
9

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

4. 상속 (Inheritance)

SCSS는 상속을 통해 기존 스타일을 재사용할 수 있게 해줍니다. 이는 중복 코드를 줄이고 스타일의 일관성을 유지하는 데 도움이 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

%button-styles {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button-primary {
  @extend %button-styles;
  background-color: blue;
}

.button-secondary {
  @extend %button-styles;
  background-color: green;
}

5. 내장 함수 (Built-in Functions)

SCSS는 수많은 내장 함수를 제공하여 색상 조작, 수학 연산, 문자열 처리 등을 쉽게 할 수 있게 해줍니다.

1
2
3
4
5
6

$color: #ff0000;
$new-color: lighten($color, 20%);

body {
  background-color: $new-color;
}

SCSS가 언제 쓰이는가?

SCSS는 대규모 프로젝트나 복잡한 스타일시트를 관리할 때 특히 유용합니다. 다음과 같은 상황에서 SCSS를 사용하는 것이 좋습니다:

  • 복잡한 스타일 관리: 중첩, 변수, 믹스인 등을 통해 복잡한 스타일을 체계적으로 관리할 수 있습니다.
  • 재사용성 향상: 변수와 믹스인을 사용하여 코드의 재사용성을 높이고 유지보수성을 향상시킬 수 있습니다.
  • 협업 프로젝트: SCSS는 모듈화를 지원하여 여러 사람이 협업하는 프로젝트에서 스타일시트를 효율적으로 관리할 수 있습니다.

CSS와 SCSS의 차이점

문법

  • CSS: 평면적이고 단순한 문법을 사용합니다.
  • SCSS: 중첩, 변수, 믹스인 등 다양한 고급 기능을 지원합니다.

유지보수

  • CSS: 코드가 길어지면 관리가 어려워질 수 있습니다.
  • SCSS: 재사용 가능한 코드 조각을 통해 관리가 용이합니다.

기능

  • CSS: 기본적인 스타일링 기능만 제공합니다.
  • SCSS: CSS의 기능을 확장하여 더욱 강력한 스타일링 도구를 제공합니다.

마무리

오늘은 SCSS를 사용하면 좋은 이유와 CSS와의 차이점에 대해 알아보았습니다. SCSS는 스타일시트를 더욱 효율적이고 조직적으로 작성할 수 있게 해주는 강력한 도구입니다. 이 포스팅이 여러분의 웹 개발 여정에 도움이 되었기를 바랍니다. 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊

다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!

SCSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github