sass => SCSS対サス

主な相違点

CSSのプリプロセッサの名前はSassが、しばしばSCSS構文を意味します。 Sassは.sassファイル拡張子を使用し、 SCSS - Sassは.scss拡張子を使用します。彼らは両方とも「サス」と呼ばれています。

一般的に言えば、 SCSS構文がより一般的に使用されています。 SCSSはより多くの機能を備えた通常のCSSと似ていますが、 Sassは通常のCSSとはかなり違って見えます。どちらの構文も同じ能力を持っています。

構文

主な違いは、 SassはSCSS中括弧やセミコロンを使用しないことです。 Sassは空白に敏感なので、正しくインデントしなければなりません。 SCSSでは、あなたが好きなようにルールを書式設定し、字下げすることができます。

SCSS：

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

SASS：

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

コンパイル後、どちらも次のCSSが生成されます。

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}

ミックスイン

Sassはもっと「怠惰な」構文になりがちです。ミックスインをどのように定義して含めるかよりも、これは優れたものではありません。

ミックスインの定義

= SCSS @mixin mixin、 Sassでmixinを定義する方法です。

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

mixinを含む

+あなたがSassどのように含めるか、 SCSS @includeです。

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)

地図

マップに関しては、通常、 SCSSは構文が簡単です。 Sassはインデントベースなので、マップは1行に保存する必要があります。

// in Sass maps are "unreadable"
$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255, .5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700: rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1 )

SCSS使用して複数の行にコードを書式設定できるので、マップをより読みやすくすることができます。

// in SCSS maps are more readable
$white: (
  white-50: rgba(255, 255, 255, .1),
  white-100: rgba(255, 255, 255, .2),
  white-200: rgba(255, 255, 255, .3),
  white-300: rgba(255, 255, 255, .4),
  white-400: rgba(255, 255, 255, .5),
  white-500: rgba(255, 255, 255, .6),
  white-600: rgba(255, 255, 255, .7),
  white-700: rgba(255, 255, 255, .8),
  white-800: rgba(255, 255, 255, .9),
  white-900: rgba(255, 255, 255, 1)
);

SassとScssのコメントは、複数の行が関係している場合を除いて、ほとんど同じです。 SASSマルチラインはインデントセンシティブであり、 SCSSはコメントターミネータに依存します。

一行コメント

style.scss

// Just this line will be commented!
h1 { color: red; }

style.sass

// Exactly the same as the SCSS Syntax!
h1
  color: red

複数行コメント

style.scss

イニシエータ： /*

ターミネーター： */

/* This comment takes up
 * two lines.
 */
h1 {
   color: red;
}

これはh1要素を赤色でスタイルします。

style.sass

現在、 SASSは2つのイニシエータがありますが、それぞれのターミネータはありません。 SASS複数のコメントはインデントレベルに敏感です。

イニシエータ： //と/*

// This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

これはh1要素を赤色でスタイルします。

/*イニシエータでも同じことができます：

/* This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

それであなたはそれを持っています！ SCSSとSASSコメントの主な違い！

SCSSとSASSの比較

SCSS構文はCSS構文によく似ていますが、 SASS構文はSCSSと少し異なりますが、どちらもまったく同じCSSコードを生成します。
SASSでは、スタイルプロパティをセミコロン（ ; ）で終了するのではなく、SCSSで（ ; ）でスタイルプロパティを終了し; 。
でSCSS我々はparanthesisを使用{}スタイルのプロパティを閉じますが、中にSASS 、我々は使用しませんparanthesis 。
SASSではIndentationが非常に重要です。これは、要素のclassまたはidにネストされたプロパティを定義します。
scssでは、 scssで複数の変数を定義できますが、 SASSでは実行できません。

forループ構文

sass 3.3とplusバージョンのリリースでは、@ifとelseの構文は同じになりました。 scssだけでなくsassの式も使用できるようになりました。

おやすみの構文

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

コンパイル済み

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

scss構文

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

コンパイルされた

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

sass
SCSS対サス

サーチ…