レス構文 (2) 混合属性_html/css_WEB-ITnose

概要:

先ほどはlessの変数と拡張構文を紹介しましたが、今日は混合属性(Mixin)について勉強します。ミキシングは、less のもう 1 つの機能と言えます。共通のプロパティを一緒に定義し、使用するときにこのミキシング プロパティを直接呼び出すことができます。

ミキシング:

LESS では、いくつかの共通の属性セットをセレクターとして定義し、これらの属性を別のセレクターで呼び出すことができます。 例:

.a, #b {  color: red;}.mixin-class {  .a();}.mixin-id {  #b();}

コンパイル後

.a, #b {  color: red;}.mixin-class {  color: red;}.mixin-id {  color: red;}

注: を呼び出すとき。混合する場合は、括弧を含めても含めなくても構いません。次のものも正しいです:

.a, #b {  color: red;}.mixin-class {  .a;}.mixin-id {  #b;}

ミックスを定義するだけの場合は、次のようにセレクターの後に括弧を追加できます:

.my-mixin {  color: black;}.my-other-mixin() {  background: white;}.class {  .my-mixin;  .my-other-mixin;}

コンパイル後に、brackets.my-other を追加します。 -mixin() はコンパイルされません。

.my-mixin {  color: black;}.class {  color: black;  background: white;}

CSS クラス、ID、または要素属性セットは、同じ方法でユニバーサル セレクター内に導入できます。

名前空間:

より複雑なセレクターで属性を混合したい場合は、複数の ID またはクラスをスタックできます。以下のように:

#outer {  .inner {    color: red;  }}

この混合属性を使用したい場合は、次の 4 つが同等です。

.c{    #outer > .inner;}.c{    #outer > .inner();}.c{    #outer.inner;}.c{    #outer.inner();}

を避けるために、混合属性を ID の下に定義できます。他のミックスと競合します。

Keyword ! important:

混合属性を使用した後に ! important キーワードを追加すると、混合内のすべての属性がキーワード ! important とともに追加されます。例:

.foo (@bg: #f5f5f5, @color: #900) {  background: @bg;  color: @color;}.unimportant {  .foo(1);}.important {  .foo(2) !important;}

Compiled

.unimportant {  background: #f5f5f5;  color: #900;}.important {  background: #f5f5f5 !important;  color: #900 !important;}

パラメータとの混合:

混合プロパティでは、次のように括弧を介してパラメータを渡すこともできます:

.border-radius(@radius) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}

使用するときに渡すだけです次のように、パラメータを 1 つだけ指定します。

rrree

もちろん、パラメータにデフォルト値を指定して、使用時に値を渡すかどうかを指定することもできます。以下のように:

#header {  .border-radius(4px);}.button {  .border-radius(6px);}

値を渡さない場合は、デフォルト値の 5px が使用されます。

もちろん、次のように複数のパラメータを渡すこともできます:

.border-radius(@radius: 5px) {  -webkit-border-radius: @radius;     -moz-border-radius: @radius;          border-radius: @radius;}

コンパイル後

.mixin(@color) {  color-1: @color;}.mixin(@color; @padding:2) {  color-2: @color;  padding-2: @padding;}.mixin(@color; @padding; @margin: 2) {  color-3: @color;  padding-3: @padding;  margin: @margin @margin @margin @margin;}.some .selector div {  .mixin(#008000);}

コンパイル結果からわかるように、less には関数のオーバーロードの機能もあります。同じミックス属性名を異なるパラメーターで定義し、 .mixin(#008000); を呼び出すと、最初と 2 番目のミックスは両方とも一致しますが、3 番目のミックスにはパラメーター @padding の値がないため、3 番目のミックスは一致します。属性は参照されません。

次のように複数の値を渡すだけでなく、属性名を指定して値を渡すこともできます:

.some .selector div {  color-1: #008000;  color-2: #008000;  padding-2: 2;}

Keyword @arguments:

@arguments には特別な意味があり、js の引数と同様に、すべてが含まれます混合属性に渡されるパラメータは次のとおりです:

.mixin(@color: black; @margin: 10px; @padding: 20px) {  color: @color;  margin: @margin;  padding: @padding;}.class1 {  .mixin(@margin: 20px; @color: #33acfe);}.class2 {  .mixin(#efca44; @padding: 40px);}

Compiled

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {  -webkit-box-shadow: @arguments;     -moz-box-shadow: @arguments;          box-shadow: @arguments;}.big-block {  .box-shadow(2px; 5px);}

Keyword @reset:

@arguments とは異なり、@reset には指定されたパラメータ以外のパラメータが含まれます。例:

。

.big-block {  -webkit-box-shadow: 2px 5px 1px #000;     -moz-box-shadow: 2px 5px 1px #000;          box-shadow: 2px 5px 1px #000;}

パターン マッチング:

場合によっては、渡したパラメータに基づいてミックスインに次のような異なる処理を実行させたいことがあります。

.mixin(@a; @rest...) {   // @rest包含了@a之后的参数   // @arguments包含了所有参数}

コンパイル後

.mixin(dark; @color) {  color: darken(@color, 10%);}.mixin(light; @color) {  color: lighten(@color, 10%);}.mixin(@_; @color) {  display: block;}.class {  .mixin(@switch; #888);}

関数として Mixin を使用する:

mixin を関数として使用する場合、関数を呼び出した後、変数は、 mixin 属性を呼び出す要素は、同じ変数自体を定義します。例:

@switch: light;

コンパイル後

.class {  color: #a2a2a2;  display: block;}

次の式を使用します:

.mixin() {  @width:  100%;  @height: 200px;}.caller {  .mixin();  width:  @width;  height: @height;}

コンパイル後

rrリー