SCSSとSassの違いは何ですか？

私が読んでいることから、Sassは変数と数学のサポートによりCSSをより強力にする言語です。

SCSSとの違いは何ですか？同じ言語になっているのでしょうか？似てる？違う？

Sassは、構文が改善されたCSSプリプロセッサです。高度な構文のスタイルシートはプログラムによって処理され、通常のCSSスタイルシートに変換されます。ただし、CSS標準自体を拡張するものではありません。

CSS変数がサポートされており、使用できますが、プリプロセッサー変数だけではありません。

SCSSとSassの違いについては、Sassドキュメントページの次のテキストで質問に答える必要があります。

Sassで使用できる構文は2つあります。1つはSCSS（Sassy CSS）として知られ、このリファレンス全体で使用され、CSSの構文の拡張です。つまり、すべての有効なCSSスタイルシートは、同じ意味を持つ有効なSCSSファイルです。この構文は、以下で説明するSass機能で強化されています。この構文を使用するファイルの拡張子は.scssです。

インデントされた構文（または単に "Sass"と呼ばれることもある）として知られる2番目以降の構文は、CSSをより簡潔に記述する方法を提供します。括弧の代わりにインデントを使用してセレクターのネストを示し、セミコロンではなく改行を使用してプロパティを区切ります。この構文を使用するファイルの拡張子は.sassです。

ただし、これはすべて、最終的にCSSを作成するSassプリコンパイラでのみ機能します。これはCSS標準自体の拡張ではありません。

私はSassの作成を手伝った開発者の一人です。

違いはUIです。テキストの外観の下では、それらは同一です。これが、sassファイルとscssファイルが相互にインポートできる理由です。実際、Sassには4つの構文パーサー（scss、sass、CSSなど）があります。これらはすべて、異なる構文を抽象構文ツリーに変換します。抽象構文ツリーは、CSS出力にさらに処理されるか、sass-convertツールを介して他の形式のいずれかに変換されます。

一番好きな構文を使用してください。どちらも完全にサポートされており、気が変わった場合は後で変更できます。

Sass .sassファイルは、ファイルと視覚的に異なり.scssます。

Example.sass-sassは古い構文です

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss-sassy cssはSass 3の新しい構文です

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

拡張子をから.cssに変更するだけで、有効なCSSドキュメントをSassy CSS（SCSS）に変換できます.scss。

Sass（構文的に素晴らしいStyleSheets）には2つの構文があります。

• 新しい：SCSS（Sassy CSS）
• そして、古い、オリジナル：オリジナルでインデント構文、サスとも呼ばれているサス。

したがって、どちらもSassプリプロセッサの一部であり、2つの異なる構文を使用できます。

SCSSとオリジナルのSassの最も重要な違い：

SCSS：

• 構文はCSSに似ています（通常のすべての有効なCSS3も有効なSCSSですが、他の方向の関係は明らかに発生しません）

• ブレースを使用 {}

• セミコロンを使用します ;
• 割り当て記号は :
• ミックスインを作成するには、@mixinディレクティブを使用します
• mixinを使用するには、前に@includeディレクティブを置きます
• ファイルの拡張子は.scssです。

元のSass：

• 構文はRubyに似ています
• ブレースなし
• 厳密なインデントなし
• セミコロンなし
• 割り当て記号の=代わりに:
• ミックスインを作成するには、=記号を使用します
• ミックスインを使用するには、前に+記号を付けます
• ファイルの拡張子は.sassです。

元の構文であるSassを好む人もいれば、SCSSを好む人もいます。どちらの方法でも、Sassのインデントされた構文はこれまでも、今後も非推奨になることはありません。

変換SASSコンバート：

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

SassとSCSSのドキュメント

その構文は異なり、それが主な長所（または見方によっては短所）です。

私は他の人が言ったことの多くを繰り返さないようにします、あなたは簡単にそれをググることができますが、代わりに、両方を使った経験から、時には同じプロジェクトでさえ、いくつかのことを言いたいです。

SASSプロ

• よりクリーン-Python、Ruby（シンボルのような構文で小道具を書くこともできます）、またはCoffeeScriptの世界から来ている場合、それはあなたにとって非常に自然になります-ミックスイン、関数、および一般的に再利用可能なものを書くの.sassははるかに簡単です'および.scss（主観的）よりも読み取り可能です。

SASSの短所

• 空白を区別します（主観的）。他の言語では問題ありませんが、CSSでは問題が発生します（問題：コピー、タブ対スペース戦争など）。
• インラインルールはありません（これは私にとってゲームのbody color: red中断でした）、. scssのように行うことはできませんbody {color: red}
• 他のベンダーのものをインポートし、バニラCSSスニペットをコピーする-不可能ではありませんが、しばらくすると非常に退屈です。解決策は、プロジェクト.scss内に（ファイルと共に.sass）ファイルを含めるか、それらをに変換すること.sassです。

これ以外-彼らは同じ仕事をします。

今、私がしたいことは、可能.sassで.scssあれば実際にCSSにコンパイルされるコードとミックスインと変数を記述することです（つまり、Visual Studioはサポートされていませんが.sass、Railsプロジェクトで作業するときはいつも、それらの2つを組み合わせます。 1つのファイルで）。

最近、（他の機能の中で）1つのファイルに2つの構文を組み合わせることができるため、スタイラスにチャンス（フルタイムのCSSプリプロセッサ用）を与えることを検討しています。これはチームにとって良い方向性ではないかもしれませんが、それを単独で維持している場合は問題ありません。構文に問題がある場合、スタイラスは実際には最も柔軟です。

そして用finalyミックスイン.scssVS .sassシンタックスの比較：

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

言語のホームページから

Sassには2つの構文があります。新しいメインの構文（Sass 3以降）は「SCSS」（「Sassy CSS」）と呼ばれ、CSS3の構文のスーパーセットです。つまり、有効なCSS3スタイルシートはすべて有効なSCSSでもあります。SCSSファイルは拡張子.scssを使用します。

2番目の古い構文は、インデントされた構文（または単に「Sass」）として知られています。 Hamlの簡潔さに触発され、CSSとの類似性よりも簡潔さを好む人を対象としています。括弧とセミコロンの代わりに、行のインデントを使用してブロックを指定します。主な構文ではなくなりましたが、インデントされた構文は引き続きサポートされます。インデントされた構文のファイルは、拡張子.sassを使用します。

SASSは、CSSを吐き出すインタプリタ言語です。Sassの構造は（リモートで）CSSのように見えますが、この説明は少し誤解を招くようです。それはだではない CSSの交換、または拡張。これは、最終的にCSSを出力するインタープリターであるため、Sassには通常のCSSの制限がありますが、単純なコードでそれらをマスクします。

基本的な違いは構文です。SASSには、セミスペースのない空白のある緩やかな構文がありますが、SCSSはCSSに似ています。

SASSは、Syntaxally Awesome StyleSheetsの略です。これはCSSの拡張であり、基本的な言語に力と優雅さを追加します。SASSは新たにSCSSとして名前が変更されましたが、古いSASSも存在します。SCSSまたはSASSを使用する前に、以下の違いを確認してください。

一部のSCSSおよびSASS構文の例：

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

コンパイル後にCSSを出力（両方に同じ）

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

詳細については、公式ウェブサイトをご覧ください。

最初はSassでしたが、構文は少し異なります。たとえば、ミックスインを含める：

Sass: +mixinname()
Scss: @include mixinname()

Sassは中括弧とセミコロンを無視し、入れ子にすることにしました。

SASSとSCSSの違いの記事では、詳細の違いについて説明しています。SASSとSCSSのオプションに混同しないでください。私も最初はそうでしたが、.scssはSassy CSSであり、次世代の.sassです。

それが意味をなさない場合は、以下のコードの違いを確認できます。

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

上記のコードでは、を使用しています。宣言を分離します。この点をさらに説明するために、.borderのすべての宣言を1行に追加しました。対照的に、以下のSASSコードはインデント付きの別の行になければならず、;の使用はありません。

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

以下のCSSを見ると、SCSSスタイルが以前のSASSアプローチよりも通常のCSSにかなり似ていることがわかります。

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

最近のほとんどの時間では、誰かがSassで作業していると言及した場合、彼らは従来の.sassの方法ではなく.scssでオーサリングすることを指していると思います。

オリジナルsassはルビー構文に似ており、ルビー、ジェイドなどに似ています...

これらの構文では、を使用せず{}、代わりに空白を使用し;ます。

ではscss構文がより似ていますCSSが、のようなより多くのオプションになって：と同様に、など、宣言、ネストをless前処理およびその他のCSS...

彼らは基本的に同じことを行うが、私は、構文の違いを見ることを見て、それぞれの行のカップルを置く{}、;とspaces：

SASS：

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS：

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

コンパクトな答え：

SCSSは、Sass CSSプリプロセッサでサポートされる主な構文を指します。

• で終わるファイル.scssは、Sassでサポートされている標準の構文を表しています。SCSSはCSSのスーパーセットです。
• で終わるファイル.sassは、Rubyの世界を起源とするSassがサポートする「古い」構文を表しています。

SASSは構文的に素晴らしいスタイルシートであり、ネストされたルール、継承、Mixinsの機能を提供するCSSの拡張ですが、SCSSはCSSと同様のSassyカスケードスタイルシートであり、CSSとSASS間のギャップと非互換性を埋めます。それはMITライセンスの下でライセンスされました。この記事では、違いについて詳しく説明しています。https：//www.educba.com/sass-vs-scss/