CSS3、SASS、SCSS、コンパス、少ない、バーボンとは何ですか

css、sass、scss、compass、less、and bourbon：迅速な比較

このガイドは、CSS3といくつかの人気のあるCSSプレセッサの簡潔な概要を提供します。 初心者には、コンパスから始めることを強くお勧めします！

css3：

• カスケードスタイルのシートの最新バージョン。
• アニメーション、トランジション、変換などの高度な機能を提供しています
• css3css3 demo css3ドキュメントを学習します

sass＆scss：

• sass（構文的に素晴らしいスタイルのシート）：ネスト、変数、ミキシンなどの機能を提供するCSS拡張機能。 構文にインデントを使用します。サーバー側の処理（通常はRubyを使用）
scss
• （sassy css）：sassと機能的に同一ですが、巻き毛のあるcssのような構文を使用しています。
sass webサイト

scssドキュメントsassインストール 例：

コンパス：

/* CSS */
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

/* SCSS */
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

/* SASS */
li
  font:
    family: serif
    weight: bold
    size: 1.2em

SASSに基づいて構築されたCSSフレームワーク。

有用なミキシン、クロスブラウザー互換性の機能、タイポグラフィパターンのライブラリを提供します。

スプライト生成を簡素化します。
• コマンドラインを介して簡単に更新できます。
• コンパスウェブサイト
• コンパスデモ>コンパスインストール1

コンパスのインストール2

例： コンパスコード：

生成されたCSS：

少ない：

#opacity-10 {
  @include opacity(0.1);
}

• JavaScriptベースのCSSプリプロセッサ、処理されたクライアント側。
• SASS（ネスト、変数、ミキシン）と同様の機能を提供します
コンパスに相当するフレームワークがありません。

ウェブサイトが少ないデモバーボン：

SASS用の軽量ミックスライブラリ CodeKitやHammerなどのツールでシームレスに動作します

バーボンのウェブサイト

バーボンデモ

• バーボンドキュメント

（括弧付きの

プレースホルダーを実際のURLに置き換えてください。）

以上がCSS3、SASS、SCSS、コンパス、少ない、バーボンとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。