Post

SCSS) SCSS란 무엇인가?

Posted Updated
Preview Image
By parksohyunnn 6 min read

SCSS란 무엇인가?

SCSS(Sassy CSS)는 Sass(Syntactically Awesome Style Sheets)의 새로운 문법으로, CSS를 더 강력하고 효율적으로 작성할 수 있도록 도와주는 스타일시트 언어입니다. SCSS는 CSS의 상위 문법(Superset)으로, CSS의 모든 기능을 포함하면서도 추가적인 기능을 제공합니다. 이로 인해 CSS보다 더 간결하고 관리하기 쉬운 스타일시트를 작성할 수 있습니다.

SCSS와 Sass의 차이점

  • Sass: 원래의 Sass 문법은 중괄호 {}와 세미콜론 ;을 사용하지 않는 간결한 문법입니다. 이를 “Indented Syntax”라고도 합니다.
  • SCSS: 새로운 문법인 SCSS는 기존 CSS 문법과 거의 동일하며, 중괄호 {}와 세미콜론 ;을 사용합니다. 따라서 기존 CSS 코드를 그대로 SCSS 파일로 옮겨 사용할 수 있습니다.

SCSS의 주요 기능

1. 변수 (Variables)

SCSS에서는 변수를 사용하여 스타일 값을 저장할 수 있습니다. 변수를 사용하면 스타일 값의 재사용이 가능해지고, 일괄적인 수정이 쉬워집니다.

1
2
3
4
5
6
7

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

2. 중첩 (Nesting)

SCSS에서는 선택자(selector)를 중첩하여 더 구조적이고 읽기 쉬운 코드를 작성할 수 있습니다. HTML 구조와 유사한 형태로 스타일을 작성할 수 있어 직관적입니다.

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

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

  li { 
    display: inline-block; 
  }

  a {
    text-decoration: none;
  }
}

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)

상속을 사용하면 한 선택자의 스타일을 다른 선택자에 적용할 수 있습니다. 이는 스타일의 중복을 줄이고, 코드의 유지보수성을 높이는 데 도움이 됩니다.

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

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

5. 연산 (Operations)

SCSS에서는 수학 연산을 통해 스타일 값을 동적으로 계산할 수 있습니다.

1
2
3
4

.container {
  width: 100% - 80px;
  height: 100vh / 2;
}

6. 함수 (Functions)

SCSS는 기본적으로 다양한 함수(color functions, string functions, list functions, etc.)를 제공하며, 사용자가 정의한 함수를 사용할 수도 있습니다.

1
2
3
4
5
6
7

@function double($n) {
  @return $n * 2;
}

.container {
  width: double(10px); // 결과: 20px
}

SCSS의 장점

  • 모듈화: 코드를 모듈화하여 관리할 수 있어, 대규모 프로젝트에서도 스타일시트를 체계적으로 관리할 수 있습니다.
  • 재사용성: 믹스인과 함수, 변수 등을 사용하여 코드의 재사용성을 높일 수 있습니다.
  • 유지보수성: 중첩과 상속을 통해 코드의 중복을 줄이고, 유지보수를 용이하게 할 수 있습니다.
  • CSS 호환성: 기존 CSS 코드와 완벽하게 호환되므로, CSS에서 SCSS로의 전환이 쉽습니다.

SCSS 사용법

SCSS를 사용하려면 먼저 Sass를 설치해야 합니다. Sass는 Node.js와 npm(Node Package Manager)을 통해 설치할 수 있습니다.

1. 설치 방법

1) Node.js 설치: Node.js 공식 웹사이트에서 Node.js를 다운로드하고 설치합니다. 2) Sass 설치: 터미널에서 다음 명령어를 입력하여 Sass를 설치합니다.

1

npm install -g sass

2. SCSS 파일 컴파일

SCSS 파일을 작성한 후, 이를 CSS 파일로 컴파일해야 합니다. 터미널에서 다음 명령어를 사용하여 SCSS 파일을 CSS 파일로 컴파일할 수 있습니다.

1

sass input.scss output.css

자동 컴파일을 위해 파일을 감시(watch)할 수도 있습니다.

1

sass --watch input.scss:output.css

결론

SCSS는 CSS 작성의 효율성을 높이는 강력한 도구입니다. 변수, 중첩, 믹스인, 상속 등의 기능을 통해 더 간결하고 유지보수하기 쉬운 스타일시트를 작성할 수 있습니다. SCSS의 기본 문법과 사용법을 익히고, 실제 프로젝트에 적용해보세요. 이를 통해 더 효율적이고 생산적인 웹 개발이 가능해질 것입니다.

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

Trending Tags

git github