サーチ…
主な相違点
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;
}