ホームページ >ウェブフロントエンド >CSSチュートリアル >LESS での extend の用途は何ですか?
LESS の「拡張」は、あるセレクターから別のセレクターにスタイルを継承できるようにする機能です。セレクターで「extend」を使用すると、そのセレクターのスタイルが、それに一致する他のセレクターとマージされます。
次の例を通してそれを理解してみましょう。こうすることで、LESS の「拡張」機能の使用法をより明確に理解できます。
###文法###上記の構文では、「.selector1」はスタイルを継承するセレクター、「.selector2」はスタイルの継承元のセレクターです。 「extend」を使用する場合、「&」記号を使用してネストされたセレクターを作成することもできます。
Less で「Extend」属性を使用するさまざまな方法
セレクターに追加された拡張子
既存のセレクターの後にセレクターを展開します -
拡張内部ルールセット
「extend」を使用する場合、「&」記号を使用してネストされたセレクターを作成できます。
Extend との完全一致
CSS 拡張機能を使用する場合、セレクター間の完全な一致が検索されることを理解することが重要です。つまり、意味が同じであっても、セレクターが一致するには同じ形式である必要があります。
Less の all キーワードを拡張パラメータの最後の部分として使用できます。これにより、別のセレクターの一部としてセレクターと一致するように Less に指示できます。これにより、元のセレクターの一致する部分を含む新しいセレクターが作成され、拡張子に置き換えられます。
これは例です -
リーリー次の例では、クラス名 .button のボタンの基本スタイルを定義し、「extend」関数を使用して基本スタイルを拡張して特定のスタイルを定義し、メイン ボタンと危険ボタンを定義します。スタイル。
.primary-button クラスと .danger-button クラスは、.button クラスで定義されたすべてのスタイルを継承するため、コードの重複を減らすことができます。さらに、各クラスは独自のカスタム スタイルを追加して、さまざまなボタン スタイルを作成します。
例 2
以下の例では、クラス名 .card を持つカードの基本スタイルを定義します。次に、「拡張」関数を使用して、大きなカード、ヘッダーのあるカード、フッターのあるカード、ヘッダーとフッターの両方のあるカードの特定のスタイルを定義します。
出力では、.card に定義されたスタイルが他のクラスに継承され、必要に応じてカスタマイズされていることを確認できます。
リーリー ###出力### リーリー以上がLESS での extend の用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。