Question

我有一个.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; 
}

但是这不能编译。

如何实现这种嵌套类重用？
如果我想要做的事情是不可能的，那么允许我做什么是最好的选择 sprite用于其他类？

Answer 1

本案例中的特定解决方案

我建议您根据需要制作一个主混音以生成您需要的内容。这是一个适用于当前版本的LESS 1.3.1的解决方案：

<强> LESS

.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课程，请跳过制作这些课程的步骤，因为您没有必要这样做。

更一般的解决方案？

如果您的图标具有正确的逻辑 ，则可以更加通用以适应任何尺寸的图标。

<强> LESS

.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;
}

在LESS中重用嵌套类以重用精灵图标

1 个答案:

本案例中的特定解决方案

更一般的解决方案？