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

私はCSSをよく知っていますが、Sassについて混乱しています。SCSSはCSSとどのように異なりますか？CSSの代わりにSCSSを使用すると、同じように機能しますか？

イドリスの回答に加えて：

CSS

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

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

SCSS

SCSSでは、aを使用してこのコードを短縮できる@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

CSSは、ブラウザがWebページのスタイルを設定するために理解できるスタイル言語です。

SCSSは、の特別なタイプのファイルでありSASS、Rubyで記述されたプログラムCSSであり、ブラウザーのスタイルシートをアセンブルしSASSます。また、情報のために、CSS変数やネストなどの機能に多くの追加機能を追加して、書き込みをCSSより簡単かつ迅速に行うことができます。
SCSSファイルは、Webアプリを実行しているサーバーによって処理され、CSSブラウザーが理解できる従来の形式で出力されます。

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

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

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

そして、これは少ないです

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

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

変数の定義は正しい：

$      => SCSS, SASS
--     => CSS
@      => LESS

すべての回答は良いですが、質問と回答は少し異なります

「Sassについて。SCSSとCSSの違い」：scssは整形式のCSS3構文です。sassプリプロセッサを使用して作成します。

CSSの代わりにSCSSを使用すると、同じように機能しますか？はい。IDEがsassプリプロセッサをサポートしている場合。同じように機能します。

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

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

• 詳細情報：

CSSプリプロセッサとは何ですか？

CSS自体には、再利用可能で整理されたコードを記述するために必要な複雑なロジックと機能がありません。その結果、開発者は制限に拘束され、特に大規模なコードと複数のCSSスタイルシートを含む大規模なプロジェクトで作業する場合、コードのメンテナンスとスケーラビリティが非常に困難になります。ここでCSSプリプロセッサが役に立ちます。

CSSプリプロセッサは、独自のスクリプト言語を介してデフォルトのバニラCSSの基本機能を拡張するために使用されるツールです。これは、変数、関数、ミックスイン、コードのネスト、継承などの複雑な論理構文を使用して、バニラCSSにいくつかの名前を付け、それをスーパーチャージするのに役立ちます。CSSプリプロセッサを使用することで、シームレスな自動化タスク、再利用可能なコードスニペットの構築、コードの繰り返しと肥大化の回避、およびよく整理された読みやすいネストされたコードブロックの書き込みを行うことができます。ただし、ブラウザはネイティブの基本的なCSSコードしか理解できず、CSSプリプロセッサの構文を解釈できません。したがって、複雑で高度なプリプロセッサ構文を最初にネイティブCSS構文にコンパイルして、ブラウザーで解釈できるようにして、ブラウザー間の互換性の問題を回避する必要があります。

この記事では、現在、世界中の開発者が現在使用している3つの最も人気のあるCSSプリプロセッサー（Sass、LESS、およびStylus）について見ていきます。SassとLESSとStylusの勝者を決める前に、まずそれらについて詳しく知ってみましょう。

Sass –構文的に素晴らしいスタイルシート

Sassは「構文的に素晴らしいスタイルシート」の頭字語です。Sassは世界で最も人気のあるCSSプリプロセッサであるだけでなく、2006年にハンプトンカトリンによって発売され、後にナタリーワイゼンバウムによって開発された最も古いものの1つでもあります。SassはRuby言語で記述されていますが、プリコンパイラーLibSassを使用すると、Sassを他の言語で解析してRubyから切り離すことができます。Sassには大規模なアクティブコミュニティがあり、初心者向けにネット上で利用できる広範な学習リソースがあります。その成熟度、安定性、および強力な論理的能力のおかげで、Sassは、競合他社に先駆けてCSSプリプロセッサの最前線への地位を確立しました。

Sassは、SassまたはSCSSを使用して2つの構文で記述できます。2つの違いは何ですか？確認してみましょう。

構文宣言：Sass vs SCSS

• SCSSはSassy CSSの略です。Sassとは異なり、SCSSはインデントに基づいていません。
• .sass拡張子はSassの元の構文として使用されますが、SCSSは.scss拡張子を持つ新しい構文を提供します。
• Sassとは異なり、SCSSにはCSSと同じように中括弧とセミコロンがあります。
• SCSSとは対照的に、SassはCSSからかなり逸脱しているため、読みにくいです。読みやすく、ネイティブCSSによく似ていると同時にSassのパワーを楽しんでいるため、SCSSがSass構文を推奨する理由です。

コンパイルされたCSSコードとともにSass vs SCSS構文を使用した以下の例を検討してください。

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

SassとSCSSのどちらの場合でも、コンパイルされたCSSコードは同じになります–

#box {
      color: #fff;
      background: #00f;

サスの使い方

間違いなく最も人気のあるフロントエンドフレームワークのブートストラップはSassで書かれています。バージョン3までは、BootstrapはLESSで作成されていましたが、bootstrap 4はSassを採用して人気を高めました。Sassを使用している大企業には、Zapier、Uber、Airbnb、Kickstarterなどがあります。

LESS –無駄のないスタイルシート

LESSは「Leaner Stylesheets」の頭字語です。これは、2006年にSassが最初にリリースされてから3年後のAlexis Sellierによって2009年にリリースされました。SassはRubyで記述されていますが、LESSはJavaScriptで記述されています。実際、LESSは、ネイティブバニラCSSの機能をミックスイン、変数、ネスト、ルールセットループで拡張するJavaScriptライブラリです。Sass vs LESSは白熱した議論です。LESSがSassの最強のライバルであり、ユーザーベースが2番目に大きいことは当然のことです。しかし、Bootstrap 4のリリースでブートストラップがLESSをダンプしてSassを支持したとき、LESSの人気は衰えました。LESSとSassの短所の1つは、関数をサポートしていないことです。Sassとは異なり、LESSは@を使用して変数を宣言するため、@ mediaおよび@keyframesと混同される可能性があります。しかしながら、LESSのSassやStylusやその他のプリプロセッサに対する主な利点の1つは、プロジェクトに簡単に追加できることです。これは、NPMを使用するか、Less.jsファイルを組み込むことによって実行できます。 構文宣言：LESS .less拡張子を使用します。LESSの構文は、$ SSの代わりに@を使用して変数を宣言することを除いて、SCSSに非常に似ています。

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

LESS の使用バージョン4のリリースまでの人気のあるBootstrapフレームワークは、LESSで作成されました。ただし、SEMANTIC UIと呼ばれる別の一般的なフレームワークは、LESSでまだ記述されています。Sassを使用している大企業には、Indiegogo、Patreon、WeChatがあります。

スタイラス

スタイラスは2010年に元Node JS開発者TJ Holowaychukによって発売されました。これは、Sassのリリースからほぼ4年後、LESSのリリースから1年後です。スタイラスはNode JSで作成され、JSスタックに完全に適合します。スタイラスは、Sassの論理的な能力とLES​​Sの単純さの影響を強く受けました。Stylusは依然としてNode JS開発者に人気がありますが、それだけでかなりのシェアを実現することはできませんでした。SassまたはLESSに対するStylusの利点の1つは、非常に強力な組み込み関数を備えており、重いコンピューティングを処理できることです。

構文宣言：スタイラス.styl拡張子を使用します。スタイラスは構文の記述に大きな柔軟性を提供し、ネイティブCSSをサポートし、括弧、コロン、セミコロンを省略できます。また、Stylusは変数の定義に@または$記号を使用しないことに注意してください。代わりに、スタイラスは代入演算子を使用して変数宣言を示します。

STYLUS構文がネイティブCSSのように書かれている

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

または

カーリーブレースなしのスタイラス構文

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

または

コロンとセミコロンのないスタイラス構文

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color