기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Sass와 SCSS는 Sass(Syntactically Awesome Stylesheets)의 두 가지 구문입니다. 둘 다 보다 구조화되고 유지 관리하기 쉬운 CSS를 작성하는 데 사용됩니다. 구문과 기능의 주요 비교는 다음과 같습니다.

1. 문법 형식

Sass(들여쓰기 구문)

• 중괄호 없음 {} 세미콜론;。
• 들여쓰기를 사용하여 중첩 및 계층 관계를 나타냅니다.

nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block
    margin-right: 5px
1
2
3
4
5
6
7

SCSS(새시 CSS)

• 표준 CSS와 유사하며 중괄호를 사용합니다. {} 세미콜론;。
• 기존의 모든 CSS 코드와 호환됩니다.

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 5px;
  }
}
1
2
3
4
5
6
7
8
9
10

2. 변수

둘 다 변수를 지원하며 동일한 구문을 갖습니다.

$primary-color: #333;

nav {
  color: $primary-color;
}
1
2
3
4
5

3. 중첩

둘 다 중첩을 지원하지만 Sass에서는 중첩이 들여쓰기를 사용하고 SCSS에서는 중괄호가 사용됩니다.

// Sass
nav
  ul
    margin: 0
    padding: 0

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 믹서

믹서의 정의와 호출은 두 가지 모두에서 동일합니다.

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

.box { @include border-radius(10px); }
1
2
3
4
5
6
7
8

5. 보간

보간은 두 가지 모두에서 동일하게 사용됩니다.

$side: left;
.margin-#{$side} {
  margin-#{$side}: 10px;
}
1
2
3
4

6. 작동

둘 다 스타일의 작업을 지원합니다.

.container {
  width: 100% - 20px;
}
1
2
3

7. 상속

둘 다 스타일 상속을 지원합니다.

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

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

.error {
  @extend .message;
  border-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

다음에 내 프로젝트에서 사용할 때 여기에 추가하겠습니다!