SSSとSassとは何ですか?

Sass は、Ruby で書かれた CSS 前処理言語です。Sass は、保守しやすく管理しやすいスタイル シートを作成するためのさまざまな機能を提供しながら、よりシンプルで洗練された構文を提供します。 Scss は Sass3 によって導入された新しい構文であり、CSS3 構文のスーパーセットであり、率直に言うと、Scss は Sass のアップグレード バージョンです。

この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、Sass バージョン 3.7.4。

推奨: css ビデオ チュートリアル

Sass とは

Sass は、 CSS のメタ言語は、ファイルのスタイルを明確かつ構造的に記述することができ、通常の CSS よりも強力な機能を備えています。 Sass は、よりクリーンで洗練された構文を提供すると同時に、保守しやすく管理しやすいスタイルシートを作成するためのさまざまな機能を提供します。

Sass は Ruby 言語で書かれた CSS 前処理言語で、2007 年に誕生し、最大の成熟した CSS 前処理言語です。元々は HAML (インデント付き HTML プリコンパイラー) で動作するように設計されていたため、HTML と同じインデント スタイルを持ちます。 SASS は、ルールのネスト、変数、ミックスイン、セレクターの継承などを追加する CSS3 の拡張機能です。コマンド ライン ツールまたは WEB フレームワーク プラグインを使用して、標準の整形式の CSS コードに変換します。

Sass 公式 Web サイト: http://sass-lang.com

Scss とは

Scss は Sass 3 です。新しい構文の導入は、CSS3 構文のスーパーセットである Sassy CSS の略称であり、すべての有効な CSS3 スタイルが Sass にも適していることを意味します。端的に言えば、Scss は Sass のアップグレード版であり、その構文は CSS3 と完全に互換性があり、Sass の強力な機能を継承しています。つまり、標準の CSS3 スタイルシートはすべて、同じセマンティクスを持つ有効な SCSS ファイルです。さらに、SCSS は、ほとんどの CSS ハック (一部の CSS トリック) や、古い IE フィルター構文などのブラウザー固有の構文も認識できます。

Scss は CSS の拡張機能であるため、CSS で適切に動作するコードはすべて Scss でも適切に動作します。言い換えれば、Sass ユーザーの場合、Scss を完全に理解するには、Sass 拡張機能がどのように機能するかを理解するだけで済みます。変数、親参照、ディレクティブなどのほとんどの拡張機能は同じですが、唯一の違いは、SCSS では改行やインデントの代わりにセミコロンや中括弧が必要であることです。

Scss と Sass の類似点と相違点

Sass と Scss は実際には同じものです。通常は Sass と呼ばれます。主な違いは次の 2 点です:

1. ファイル拡張子が異なります。Sass は拡張子として ".sass" を使用しますが、Scss は拡張子として ".scss" を使用します。 。

2. 文法の記述方法が異なります。Sass は中括弧 ({}) やセミコロン (;) を使用しない厳密なインデント文法規則で記述されますが、Scss の文法記述は CSS と同じです。非常に似たような書き方で書かれています。

次の 2 つのコードを見てみるのもよいでしょう。これはより直観的で理解しやすいでしょう。

簡単な Sass コード

#sidebar
width: 30%
background-color: #faa

対応する SSS コード

#sidebar {
   width: 30%;
   background-color: #faa;
}

さらに、SCSS は空白文字に敏感ではありません。上記のコードは、次のように記述することもできます。

#sidebar {width: 30%; background-color: #faa}

Scss コードをさらにいくつか共有します。

Sass では、ネストされたセレクターが可能です。たとえば、次の CSS コード:

div {
     h1 {
        color:blue;
    }
 }

出力 CSS スタイルは

div h1 {
    color: blue;
}

ネストされたコード ブロックでは、& を使用して親要素を参照できます。たとえば、a:hover 疑似クラスは次のように記述できます:

a {
    &:hover { color: #0099cc; }
}

出力 CSS スタイルは

a:hover {
   color: #0099cc;
}

プログラミング関連の知識の詳細については、次を参照してください: プログラミング学習# ＃＃！ ！

以上がSSSとSassとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。