web-dev-qa-db-ja.com

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

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

csssass
69
Urvi_204

Idriss answerに加えて：

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
98
Hash

CSSはあらゆるブラウザがWebページをスタイルするために理解しているスタイル言語です。

SCSSは、ブラウザ用のCSSスタイルシートを組み立てるRubyで書かれたプログラムであるSASS用の特別な種類のファイルです。情報として、SASSは変数のようなCSSに多くの追加機能を追加します。 SCSSファイルはWebアプリケーションを実行しているサーバーによって処理され、ブラウザが理解できる伝統的なCSSを出力します。

26
Idriss Benbassou

cssにも変数があります。次のように使用できます。

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}
10
Kevn

そしてこれはもっと少ない

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}
1
Sunil Rajput