LESS での extend の用途は何ですか?

LESS の「拡張」は、あるセレクターから別のセレクターにスタイルを継承できるようにする機能です。セレクターで「extend」を使用すると、そのセレクターのスタイルが、それに一致する他のセレクターとマージされます。

次の例を通してそれを理解してみましょう。こうすることで、LESS の「拡張」機能の使用法をより明確に理解できます。

ユーザーは、次の構文に従って、LESS で「extend」関数を使用できます。

上記の構文では、「.selector1」はスタイルを継承するセレクター、「.selector2」はスタイルの継承元のセレクターです。 「extend」を使用する場合、「&」記号を使用してネストされたセレクターを作成することもできます。

Less で「Extend」属性を使用するさまざまな方法

LESS の「拡張」機能を使用して CSS コードを簡素化し、最適化できるさまざまなテクニックをいくつか紹介します。

セレクターに追加された拡張子

拡張機能はセレクターにアタッチされ、それがアタッチされているセレクターを別のセレクターとマージできるようになります。これは、セレクター パラメーターを備えた通常の疑似クラスに似ています。

既存のセレクターの後にセレクターを展開します -

• リーリー

既存のセレクターの間にスペースを使用し、-

を拡張します。
• リーリー

次のように、同じルール セット内の複数のセレクターに extend を使用することもできます。 -

• リーリー

  拡張内部ルールセット

ルール セットで「extend」を使用して、あるセレクターのプロパティを別のセレクターに拡張することもできます。たとえば、-

ネストされたセレクターの拡張

「extend」を使用する場合、「&」記号を使用してネストされたセレクターを作成できます。

次の例では、「extend」を使用して、ネストされたセレクター「.selector1.nested」を「.selector2」に拡張します。これにより、「.selector2」に「.selector1」と「.nested」のスタイルを継承できるようになります。

Extend との完全一致

CSS 拡張機能を使用する場合、セレクター間の完全な一致が検索されることを理解することが重要です。つまり、意味が同じであっても、セレクターが一致するには同じ形式である必要があります。

たとえば、次の CSS コードでは -

Less の all キーワードを拡張パラメータの最後の部分として使用できます。これにより、別のセレクターの一部としてセレクターと一致するように Less に指示できます。これにより、元のセレクターの一致する部分を含む新しいセレクターが作成され、拡張子に置き換えられます。

これは例です -

例 1

次の例では、クラス名 .button のボタンの基本スタイルを定義し、「extend」関数を使用して基本スタイルを拡張して特定のスタイルを定義し、メイン ボタンと危険ボタンを定義します。スタイル。

.primary-button クラスと .danger-button クラスは、.button クラスで定義されたすべてのスタイルを継承するため、コードの重複を減らすことができます。さらに、各クラスは独自のカスタム スタイルを追加して、さまざまなボタン スタイルを作成します。

出力では、.button に定義されたスタイルが .primary-button と .danger-button に継承され、各カテゴリに定義されたカスタム スタイルが適用されていることがわかります。

例 2

以下の例では、クラス名 .card を持つカードの基本スタイルを定義します。次に、「拡張」関数を使用して、大きなカード、ヘッダーのあるカード、フッターのあるカード、ヘッダーとフッターの両方のあるカードの特定のスタイルを定義します。

出力では、.card に定義されたスタイルが他のクラスに継承され、必要に応じてカスタマイズされていることを確認できます。

ユーザーは、LESS で「extend」関数を使用する構文と、「extend」を使用して CSS コードを簡素化および最適化するためのさまざまなテクニックを学習しました。この機能を利用し、CSS コードを最適化するためのベスト プラクティスを使用することで、ユーザーは同様のスタイルの重複コードの作成を回避し、CSS コードをより整理した状態に保つことができます。

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