3

次の.lessような、スプライトを管理するためのクラスを含むファイルがあります。

.icon-16 { 
    background: url('/Content/images/app/icons-16.png') no-repeat top left; 
    width: 16px; 
    height: 16px;  

    &.about { background-position: 0px 0px;  } 
    &.add { background-position: 0px -16px;  } 
    &.add2 { background-position: 0px -32px;  }
}

後で.lessリンクされている別のファイルで、これらのスプライトを使用して背景画像を設定する必要があります。

次のようなクラスを再利用できることはわかっています。

.myClass {
  .mySharedClass;
}

ただし、ネストされた階層でクラスを再利用するための正しい構文を見つけることができません。

私がやりたいことは、次のようなものです。

.myClass {
  .icon-16.about;
}

次の出力が得られます ( と の両方 .icon-16から.about):

.myClass {
    background: url('/Content/images/app/icons-16.png') no-repeat top left; 
    width: 16px; 
    height: 16px;
    background-position: 0px 0px; 
}

ただし、これはコンパイルされません。

  1. このネストされたクラスの再利用を実現するにはどうすればよいですか?

  2. 私がやろうとしていることが不可能な場合、スプライトを他のクラスで使用できるようにするための最良の代替手段は何ですか?

4

1 に答える 1

3

この場合の具体的な解決策

必要に応じて、必要なものを生成するためのマスター mixin を作成することをお勧めします。現在のバージョンの LESS 1.3.1 で動作するソリューションを次に示します。

以下

.make-icon-16(@form: all) { 
    background: url('/Content/images/app/icons-16.png') no-repeat top left; 
    width: 16px; 
    height: 16px;

    @about: 0px 0px;
    @add: 0px -16px;
    @add2: 0px -32px;

    .makePositioning() when (@form = all) {
      &.about { background-position: @about;  } 
      &.add { background-position: @add;  } 
      &.add2 { background-position: @add2;  }
    }

    .makePositioning() when (@form = about) {
      background-position: @about;  
    } 
    .makePositioning() when (@form = add) {
      background-position: @add;  
    }
    .makePositioning() when (@form = add2) {
      background-position: @about;  
    } 

    .makePositioning();  
}

//to generate icon classes
.icon-16 {
  .make-icon-16;
}

//to include as you want in your class
.myClass {
  .make-icon-16(about);
}

CSS出力

.icon-16 {
  background: url('/Content/images/app/icons-16.png') no-repeat top left;
  width: 16px;
  height: 16px;
}
.icon-16.about {
  background-position: 0px 0px;
}
.icon-16.add {
  background-position: 0px -16px;
}
.icon-16.add2 {
  background-position: 0px -32px;
}
.myClass {
  background: url('/Content/images/app/icons-16.png') no-repeat top left;
  width: 16px;
  height: 16px;
  background-position: 0px 0px;
}

.icon-16実際のクラスが必要ない、または必要ない場合は、その必要がないため、それらを作成する手順をスキップしてください。

より一般的な解決策?

アイコンに適切なロジックがある場合は、アイコンをより一般化して任意のサイズのアイコンに対応できます。

以下

.make-icon(@form: all, @size: 16) { 
    background: url('/Content/images/app/icons-@{size}.png') no-repeat top left; 
    width: @size*1px; 
    height: @size*1px;

    @about: 0px 0px;
    @add: 0px (@size*-1px);
    @add2: 0px (@size*-2px);

    .makePositioning() when (@form = all) {
      &.about { background-position: @about;  } 
      &.add { background-position: @add;  } 
      &.add2 { background-position: @add2;  }
    }

    .makePositioning() when (@form = about) {
      background-position: @about;  
    } 
    .makePositioning() when (@form = add) {
      background-position: @add;  
    }
    .makePositioning() when (@form = add2) {
      background-position: @about;  
    } 

    .makePositioning();  
}

//to generate icon classes for 32px size
.icon-32 {
  .make-icon(all, 32);
}

CSS出力

.icon-32 {
  background: url('/Content/images/app/icons-32.png') no-repeat top left;
  width: 32px;
  height: 32px;
}
.icon-32.about {
  background-position: 0px 0px;
}
.icon-32.add {
  background-position: 0px -32px;
}
.icon-32.add2 {
  background-position: 0px -64px;
}
于 2013-03-15T17:42:26.057 に答える