SASSを始めます-CSSチュートリアル-php.cn

SASSを始めます

Jennifer Aniston

リリース： 2025-02-17 08:25:11

オリジナル

581 人が閲覧しました

この記事では、CSSワークフローを合理化するために、CSSプリプロセッサであるSASSの力を調査します。現在の情報と改善されたフォーマットで更新されています。

Getting Started with Sass

sass：css革命 SASSは、変数、ネスト、ミキシンなどの機能を備えたCSSを強化し、スタイルシートをより管理しやすく動的にします。 2つの構文を提供します：元のインデントされた構文（簡潔さのため）とよりCSSのような

（より広く採用されている）。この記事では、

。.scssに焦点を当てています .scss

なぜsass？

を使用するのか SASSは、大規模でアクティブなコミュニティと拡張の豊富なエコシステムを誇っています。そのモジュール性と組織の能力は、大規模なプロジェクトを簡素化します。インデントされた構文と

の選択は、好みの問題です。 CSSとの類似性は、初心者にとって簡単になります

.scssワークフローとツール.scss

ファイルを直接編集しないでください。代わりに、CSSにコンパイルされたファイルを変更します。これは、ビルドプロセス中に自動化するか、Livereload、CodeKit（Macのみ）、Prepros（クロスプラットフォーム）などのGUIツールを使用できます。これらのツールは、変更を保存するときにSASSを自動的に再コンパイルし、ブラウザを更新してすぐにフィードバックします。

SASSコーディングエッセンシャル

.css .scss

ネスティング：sassは、HTML構造をミラーリングして、ネスティングセレクターを許可します。ただし、過度に深いネスト（4つ以上のレベル）を避けて、過度に特定のセレクターを防止してください。再利用性のためにモジュラーコードに優先順位を付けます。

変数：
を使用して変数を定義して、スタイル設定を一元化します。これにより、更新が簡素化され、一貫性が維持されます
関数と演算子：SASSは、標準的な数学演算子と、色の操作、テキスト処理などのための組み込み関数をサポートしています。 $variable-name: value;
ミキシン：
を使用して再利用可能なスタイルのブロックを作成し、に含めます。これは、ベンダーのプレフィックスまたは一般的なスタイルのパターンを処理するのに特に便利です。
例：sassネスティング（良い対悪い） @mixin mixin-name { ... }@include mixin-name;良い：

悪い（過度にネストされた）：

例：sass変数

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

ログイン後にコピー

例：SASS MIXIN（ベンダープレフィックス）

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

ログイン後にコピー

sassプロジェクトの整理

$site-max-width: 960px;
$font-color: #333;

body {
  color: $font-color;
}

#main {
  max-width: $site-max-width;
}

ログイン後にコピー

複数のファイルを使用して、それらをフォルダーに整理します。アンダースコア（）を使用した部分的なファイル（スニペット）をプレフィックスします。これらの部分的な部分をメイン。

例：style.scss

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

ログイン後にコピー

コンパスでsassを拡張

コンパスは、SASS上に構築された強力なフレームワークであり、追加のミキシン、ユーティリティ（スプライトジェネレーションなど）などを提供します。 config.rbファイルを使用して構成します。

コンパス付きのスプライト生成

スプライト< コンパスはスプライト管理を簡素化します。画像をフォルダに整理します。

を使用してそれらをインポートし、

または個々のスプライト関数を使用してCSSクラスを生成します。 @import "images/*.png";@include all-icons-sprites;例：コンパススプライト生成

これにより、

フォルダーの各画像のCSSクラスが生成されます。

div#main {
  #sidebar {
    #navbar { /* Avoid this level of nesting */
      // ...
    }
  }
}

ログイン後にコピー

images/icons結論

SASSはCSSワークフローを大幅に改善します。今日それを使用して、より効率的で保守可能で、楽しいCSSを書きます。

faqs

sass vs. scss：

installation：
を使用します
npm install -g sassコンピレーション：
自動再コンパイルのために
オプションを使用します。
sass input.scss output.css（残りのFAQは元のテキストで直接回答され、簡潔にするためにここで繰り返されません。）

以上がSASSを始めますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。