WordPress開発者向けのSASS-＆＃＆プレス-php.cn

WordPress開発者向けのSASS

Lisa Kudrow

リリース： 2025-02-19 08:29:09

オリジナル

985 人が閲覧しました

SASS：WordPressテーマ開発の合理化

強力なCSSプリプロセッサである

SASSは、WordPressテーマ開発者に大きな利点を提供します。この記事では、より良いコード組織、より速いスタイリング、保守性の向上のためにSASSを活用する方法について説明します。

Sass for WordPress Developers

主要な利点：

拡張組織：SASSを使用すると、大規模なスタイルシートを小さくて管理可能な「部分」に分解し、コードの読みやすさを改善し、メンテナンスを簡素化できます。これには、ネストされたセレクターの使用と再利用可能なミキシンの作成が含まれます
ミキシンと関数は、繰り返しコードを排除することにより、スタイリングプロセスを加速します。スケーラブルでメンテナンス可能なコード：
SASSをワークフローに統合する：

理想的には、すでにSASSファイルが組み込まれているテーマから始めます（アンダースコアは人気のある選択肢です）。ただし、テーマがCSSのみを使用している場合、をに変換することは簡単な最初のステップです。既存のCSSは有効なSCSS構文であり、スムーズな遷移を確保します。

部分的な整理：

style.css style.scss最初の変換後、

をアンダースコア（例えば、

）で接頭する小さなテーマファイル（部分）に分割します。これらの部分的な部分をステートメントを使用してメイン

ファイルにインポートし、CSSカスケードを維持するための正しい順序を維持します。アンダースコアとファイルの拡張機能を

ステートメント（例えばstyle.scss）で省略することを忘れないでください。 .scss_navigation.scssメンテナンスのためのリファクタリング：style.scss @import @importリファクタリングにより、コードの明確さと保守性が向上します。より良い読みやすさのためのネストセレクターと繰り返しの特性をミキシンに置き換えます（ブルボンやコンパスなどのライブラリを使用することを検討してください。ベンダーのプレフィックスにミキシンを使用すると、通常、オートプレフィキサーを使用するよりも効率が低いことに注意してください。 @import 'navigation';

WordPressのSASSのコンパイル：

WordPressでは、コンパイルされたCSSファイルに名前が付けられ、テーマのルートディレクトリにあり、上部に特定のWordPressコメントが含まれている必要があります。

Sass for WordPress Developers コンピレーション方法：

guiコンパイラ：codekit、koala、and compass.appは、SASSをコンパイルするためのユーザーフレンドリーなインターフェイスを提供します。
CLIコンパイラ：サスとコンパスはコマンドラインツールを提供します。コンパスは、ファイルを使用して、出力スタイル（拡張または圧縮）、入力/出力ディレクトリなどの構成を可能にします。 config.rb compass watch

必須のWordPressコメントがコンパイルされたに含まれていることを確認するには、）を

ファイルに付けます。これにより、圧縮中の除去が防止されます

style.css!部分的な整理：style.scss

/*!
Theme Name: Sassy Theme
Theme URI: http://example.com/themes/sassy/
Author: Your Name
Author URI: http://example.com
Description: A Sass-powered WordPress theme
*/
// Import your partials here

ログイン後にコピー

組織を改善するためにフォルダーを使用してパーティシャルを構成します。ディレクトリパスを使用してフォルダー内に部分的にインポートします（例：

）。提案されたフォルダー構造：

（変数、ミキシン、リセット、タイポグラフィ）@import 'base/variables';