レス構文 (2) 混合属性_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:52:35

オリジナル

1030 人が閲覧しました

概要:

先ほどは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;}

ログイン後にコピー

コンパイル後

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

rrリー