技術共有

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

Sass と SCSS は、Sass (Syntactical Awesome Stylesheets) の 2 つの構文です。どちらも、より構造化され保守しやすい 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

次回プロジェクトで使用するときにここに追加します。