14. Sass란 무엇인가?

설치 및 확인:

1. sass-lang.com에서 Ruby를 다운로드합니다.
2. 터미널에서 gem install sass 명령어를 사용하여 Sass를 설치합니다.
3. 설치 확인: sass -v

기본 문법:

• 파일 확장자: .scss
• @import를 사용하여 다른 파일을 임포트합니다.
• 세미콜론 및 중괄호 대신 들여쓰기로 구분합니다.
• SCSS(.scss)는 CSS와 유사하면서도 SASS 문법을 선택적으로 활용할 수 있습니다.

컴파일:

• 터미널에서 sass main.scss main.css로 SCSS 파일을 CSS로 컴파일합니다.
• sass --watch main.scss:main.css로 변화를 자동 감지하면서 컴파일합니다.

1. 네스팅 (Nesting):

SCSS의 중첩 구조는 HTML 구조와 유사하여 가독성이 높아집니다. 그러나 너무 깊게 중첩되지 않도록 주의해야 합니다. 지나치게 깊은 중첩은 코드를 이해하기 어렵게 만들 수 있습니다.

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

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
      }
    }
  }
}
```

2. 변수 (Variables):

변수를 사용하여 스타일의 일관성을 유지하고 수정이 간편해집니다.

```scss
$primary-color: #3498db;

a {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 10%);
  }
}
```

3. 미디어 쿼리:

SCSS에서 미디어 쿼리를 사용할 때 중첩 구조를 활용하여 미디어 쿼리의 범위를 명확히 할 수 있습니다.

```scss
.container {
  width: 100%;

  @media screen and (min-width: 768px) {
    width: 750px;
  }

  @media screen and (min-width: 1200px) {
    width: 1140px;
  }
}
```

4. 상속과 확장 (Extend):

@extend를 사용하여 공통된 스타일을 여러 선택자에 적용할 수 있습니다.

```scss
%clearfix {
  content: "";
  display: table;
  clear: both;
}

.header {
  @extend %clearfix;
  background-color: #333;
  color: white;
}

.footer {
  @extend %clearfix;
  background-color: #333;
  color: white;
}
```

5. 믹스인 (Mixin):

믹스인을 사용하면 재사용 가능한 코드 블록을 만들어서 효율적으로 코드를 작성할 수 있습니다.

```scss
@mixin flexbox() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flexbox;
}

.sidebar {
  @include flexbox;
  flex-direction: column;
}
```

6. 산술 연산:

SCSS에서는 변수뿐만 아니라 산술 연산도 지원합니다.

```scss
$base-font-size: 16px;

h1 {
  font-size: $base-font-size * 2;
}
```

7. 플레이스홀더 선택자:

플레이스홀더 선택자는 스타일을 정의할 수 있는데, 실제로는 컴파일된 CSS에 포함되지 않습니다.

```scss
%border-radius {
  border-radius: 5px;
}

button {
  @extend %border-radius;
  background-color: #3498db;
  color: white;
}

input {
  @extend %border-radius;
  border: 1px solid #ccc;
}
```

이러한 기능들을 활용하여 SCSS를 더 효과적으로 사용할 수 있습니다.