ジャンプスタートSASS：SASSのアーキテクチャ

SASSアーキテクチャ：モジュラーCSS開発に深く飛び込みます

Jump Start SASS からのこの抜粋は、CSSアーキテクチャの複雑さとSASSがプロセスを強化する方法を調査します。 スケーラブルで保守可能なスタイルシートを構築するためのさまざまなアーキテクチャアプローチとベストプラクティスを調べます。

CSSアーキテクチャは歴史的に挑戦でした。 SASSはこれに変数、ミキシン、その他の機能で対処しますが、最適なアプローチは依然として議論のポイントです。 一般的な方法には、OOCS、SMACSS、アトミックデザイン、ITCSS、およびBEMがあり、それぞれに長所と短所があります。 最良の戦略は、多くの場合、複数のシステムの要素を組み合わせたハイブリッドです。

重要な概念：

sassの拡張
• ：：cssの@importとは異なり、Sassのバージョンはコンピレーション中に複数のファイルを組み合わせて、httpリクエストを削減します。 @import部分を備えたモジュラーアーキテクチャ：
フォルダー内で整理された
• のようなアンダースコアプレフィックスで示される、cssを論理ユニット（部分的な部分）に分割します。これらは、コンパイル用のメインファイルにインポートされます。 CSSアーキテクチャの方法論：_buttons.scssOOCSS、SMACSS、Atomic Design、ITCSS、およびBEMを探索して、彼らの原則を理解し、プロジェクトに適応させます。
• SASS機能：一貫性、読みやすさ、保守性のための変数、ミキシン、および機能を活用してください。
将来の考慮事項：
• Sass 4のモジュラーインポートは、強化されたコントロールと名前空間管理を提供します。 整理されたファイル構造：
スタイルを
• 、、。
• 複数のファイルとフォルダー：base componentsコードを複数のファイルに分割することは、プレ前セッサーの中心的な利点です。 SASSは、粒状組織を許可します。 utilitiesルールは、コンピレーション中にこれらのファイルをブラウザ用の単一のCSSファイルに統合します。

css対sassの輸入：

css

ブラウザ側のハンドリングを使用し、追加のHTTPリクエストが発生します。 sass

コンパイルを処理して、単一の出力ファイルを作成します。 SASSは、@importファイルの標準のCSSインポート、

または

urls、および関数に戻ります。

sassの輸入と部分：

@import @importsassインポート（.cssまたはhttp://ファイル）がメインファイルにコンパイルされます。 部分的な（https://で始まるファイル名）は、独立してコンパイルされるのではなく、他のファイルにインポートされます。 拡張機能は、単純さのためにインポートで省略できます。url()

サスディレクトリ構造の例：

<code>sass/
├── config/
│   ├── _colors.scss
│   └── _webfonts.scss
├── layout/
│   ├── _navigation.scss
│   └── _banner.scss
├── modules/
│   ├── _calendar.scss
│   └── _contact.scss
└── main.scss</code>

コンポーネントと組織：

特異性に基づいて部分的な部分をフォルダーに整理します（最初にグローバルデフォルト、次にサイト全体のパターン、コンポーネント、およびオーバーライド）。 これらを同じ順序でマスターファイル（main.scss）にインポートします。

oocss（オブジェクト指向のCSS）：

さまざまなコンテキストで再利用可能な粒状設計パターンを強調します。 重要な原則：個別の構造と肌、および個別のコンテナとコンテンツ。

アトミックデザイン：

は、CSSを原子、分子、生物、テンプレート、およびページに整理します。 コンポーネントを構築するための構造化されたアプローチを提供します

bem（block、element、modifier）：

命名条約（）を使用して、再利用可能で独立したブロックを作成します。 CSS、HTML、およびJavaScriptを含む包括的なシステムを提供します

smacss（CSSのスケーラブルおよびモジュラーアーキテクチャ）：block__element--modifier

CSSをベース、レイアウト、モジュール、状態、およびテーマに分類します。 適用性の深さとコンポーネントを小さく独立した状態に保つことに焦点を当てています。 itcss（反転した三角形CSS）：

は、逆三角形として視覚化されたリーチ、特異性、および明示性に基づいてCSSを整理します。 レイヤーには、設定、ツール、汎用、要素、オブジェクト、コンポーネント、およびトランプが含まれます。

ミリアムのミックスアンドマッチ：

さまざまなシステムの要素を組み合わせた柔軟なアプローチ、CSSカスケードの優先順位付け、構成と再利用可能なツールの「SASS中枢神経系」を使用しています。 SASS 4のモジュラーインポート：

この今後の機能は、グローバルネームスペースの競合に対処し、コントロールと名前空間管理を強化します。

では、モジュールの特定の部分をインポートして名前を付けてもらうことができます。

モジュール間でAPIを通過させることを容易にします。

結論：

@use適切なSASSアーキテクチャを選択することは、プロジェクトのニーズとチームの好みに依存します。 さまざまなシステムのベストプラクティスを組み込んだハイブリッドアプローチは、多くの場合、最も効果的なソリューションです。 SASS 4のモジュラーインポートは、モジュール性と保守性のさらなる改善を約束します。

以上がジャンプスタートSASS：SASSのアーキテクチャの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。