Articles

の違い。サスと。scss

by admin

私が最初にCSSプリプロセッサの道を始めたとき、私はさまざまなオプション（sass、less、stylus）、構文の違いに圧倒されました。

あなたが頻繁に使用している場合CodePen.io あなたが選ぶことができるCSSの味に関しては、いくつかのオプションがあることに気付くでしょう。

  • Sass with Compass
  • Scss with Compass
  • LESS
  • 通常のol’CSS

最初はSASSとSCSSのオプションに混乱してはいけません。scssは生意気なCSSであり、の次世代です。サス ウェブサイトからの説明

Sassには2つの構文があります。 最も一般的に使用される構文は”SCSS”（”Sassy CSS”のための）として知られており、CSS3の構文のスーパーセットです。 これは、すべての有効なCSS3スタイルシートが有効なSCSSでもあることを意味します。 SCSSファイルは拡張子を使用します。scss.

二つ目の古い構文は、インデントされた構文（または単に”。sass”）。 Hamlの簡潔さに触発され、CSSとの類似性よりも簡潔さを好む人を対象としています。 括弧やセミコロンの代わりに、行のインデントを使用してブロックを指定します。 インデントされた構文のファイルは拡張子を使用します。サスp>

上のSASS対SCSSの説明sass-lang.com それが意味をなさない場合は、以下のコードの違いを見ることができます。上記のコードでは、宣言を分離するために;.borderのすべての宣言を1行に追加しました。対照的に、以下のSASSコードはインデント付きの異なる行になければならず、;を使用することはありません。以下のCSSから、SCSSスタイルが古いSASSアプローチよりも通常のCSSにはるかに似ていることがわかります。私は、誰かが彼らがオーサリングを参照しているSassで作業していることを言及している場合、これらの日のほとんどの時間を考えます。

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

scssではなく、伝統的な。サス-ウェイまた、あなたの応答ビルドであなたを助けるいくつかの有用な@mixinsをチェックアウトしたいかもしれません。

div