web-dev-qa-db-ja.com

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

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

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

csssass
1572
bruno077

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

CSS変数がサポートされていて利用できますが、プリプロセッサ変数とは異なります。

SCSSとSassの違いは、 Sassのドキュメントページのこのテキスト です。

Sassには2つの構文があります。最初のものはSCSS（Sassy CSS）として知られており、この参照を通して使われていますが、CSSの構文の拡張です。つまり、有効なCSSスタイルシートはすべて同じ意味の有効なSCSSファイルです。この構文は、次に説明するSass機能によって強化されています。この構文を使用しているファイルは.scss拡張子）を持ちます。

2番目と古い構文、インデントされた構文（または単に「Sass」と呼ばれることもあります）は、CSSを記述するためのより簡潔な方法を提供します。）この構文を使用しているファイルは.sass拡張子）を持ちます。

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

1568
anon

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

違いはUIです。原文の外観の下にそれらは同一です。これが、sassファイルとscssファイルが互いにインポートできる理由です。実際、Sassには、scss、sass、CSS、およびlessの4つの構文解析プログラムがあります。これらはすべて、異なる構文を 抽象構文ツリー に変換し、さらにCSS出力またはsass-convertツールを介して他の形式の1つに処理されます。

あなたが一番好きな構文を使用してください、両方とも完全にサポートされています、そして、あなたが気が変わったらあなたは後でそれらの間で変えることができます。

531
chriseppstein

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から.scssに変更するだけで、有効なCSS文書をSassy CSS（SCSS）に変換できます。

324
Anthuan Vásquez

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

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

SASSプロ

  • より洗練された - Python、Ruby（シンボルのような構文で小道具を書くことさえできる）、あるいはCoffeeScriptの世界から来たものであれば、ミックスイン、関数、そして一般的に再利用可能なものを.sassに書くことは大いに自然になります。 .scss（主観的）よりも読みやすく、読みやすいです。

SASSの短所

  • ホワイトスペースに敏感（主観的）、私は他の言語ではそれを気にしませんが、ここCSSではそれは私を悩ますだけです（問題：コピー、タブ対スペース戦争など）。
  • インラインのルールはありません（これは私にとってはゲームの中断でした）。あなたは.scssのようにbody color: redをすることはできませんbody {color: red}
  • 他のベンダーのものをインポートし、Vanilla CSSスニペットをコピーする - 不可能ではないが、しばらくすると非常につまらなくなる。解決策は、プロジェクトに.scssファイルを（.sassファイルと共に）用意するか、それらを.sassに変換することです。

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

さて、私がやりたいことは.sassでミックスインと変数を書き、可能であれば.scssで実際にCSSにコンパイルするコードを書くことです（つまり、Visual Studioは.sassをサポートしていません。それらは、1つのファイルofcには含まれていません。

最近、私は Stylus を（フルタイムCSSプリプロセッサのために）チャンスを与えることを検討しています。それはチームが取るべき良い方向ではないかもしれませんが、あなたが一人でそれを維持しているとき - それは大丈夫です。構文が問題になる場合、スタイラスは実際には最も柔軟性があります。

.scssと.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
75
Drops

Sass（文法的に素晴らしいスタイルシート）の構文は2つあります。

  • 新しい：SCSS（Sassy CSS）
  • これは、元のSassであり、Sassとも呼ばれます。

そのため、これらは両方ともSassプリプロセッサの一部であり、構文は2つあります。

SCSSと元のSassの最も重要な違いは以下のとおりです。

SCSS：

  • 構文はCSSに似ています（すべての正規の有効なCSS3も有効なSCSSですが、反対方向の関係も明らかにそうではありません）。起こる）

  • 中括弧を使用します{}

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

元のSass：

  • 構文はRubyに似ています
  • 中括弧なし
  • 厳密なインデントなし
  • セミコロンなし
  • 割り当て記号が=ではなく:です
  • ミックスインを作成するために=サインを使います
  • mixinを使用するには、その前に+記号を付けます。
  • ファイルの拡張子は.sassです。

元の構文であるSassを好む人もいれば、SCSSを好む人もいます。どちらにしても、 Sass's}字下げされた構文は今までにない、そしてこれからも廃止されることはないでしょう 。

sass-convertによる変換

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

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

SASS REFERENCE

68
simhumileco

の言語のホームページから

Sassには2つの構文があります。 （Sass 3以降の）新しい主な構文は“ SCSS”（“ Sassy CSS”用）として知られており、CSS 3の構文の上位集合です。つまり、有効なCSS3スタイルシートはすべて有効なSCSSでもあります。 SCSSファイルは拡張子.scssを使用します。

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

SASSはCSSを吐き出す解釈済み言語です。 Sass looksの構造はCSS（remote）に似ていますが、説明は少し誤解を招くようです。それはnot CSSの置き換え、または拡張です。それは結局CSSを吐き出すインタプリタなので、Sassにはまだ通常のCSSの制限がありますが、単純なコードでそれらを覆い隠しています。

55
Blender

基本的な違いは構文です。 SASSには空白とセミコロンを含まない緩い構文がありますが、SCSSはCSSに似ています。

21
designerNProgrammer

Sassが最初のものであり、構文は少し異なります。たとえば、mixinを含めると

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

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

12
user3522940

オリジナルのsassは、Rubyやjadeなどに似た、Rubyの構文に似たものです。

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

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;
}
10
Alireza

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でオーサリングをしていると思います。

8
Shailesh Vikram Singh

SASSは、Syntactically Awesome StyleSheetsの略です。基本言語にパワーと優雅さを追加するのはCSSの拡張です。 SASSはいくつかの変更を加えてSCSSと命名されましたが、古いSASSもあります。 SCSSまたはSASSを使用する前に、以下の違いを確認してください。

enter image description here

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);
}

詳細については公式を参照してください ウェブサイト

7
Srikrushna Pal

コンパクトな答え：

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

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