[解決済み] CSSとSCSSの違いは何ですか？

質問

CSSはよく分かっていますが、Sassについては混乱しています。SCSSとCSSはどう違うのですか？CSSの代わりにSCSSを使っても同じように機能するのですか？

どのように解決するのですか？

に加えて イドリス を回答してください。

CSS

CSSでは、以下のようなコードを全面に記述します。

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

SCSSでは、このコードを短縮するために @mixin と書く必要はありません。 color と width プロパティを何度も何度も繰り返しています。PHPなどの言語と同様に、関数で定義することができます。

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

しかし、SASSでは、SCSSよりも全体の構造が視覚的に速く、きれいになります。

• コピー＆ペーストを使用している場合、空白に敏感です。

• 現在、インラインCSSには対応していないようです。

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color