开发者

How to apply concatenated classes within another class using Less?

Let's say I have the following Less setup:

.box {
 border: 1px solid #333;
 &.error {
  background-color: Red;        
 }
}

If I wanted to declare another class which applied the full style of .box.error, as .error-box for example, what's the correct syntax?

If I use:

.error-box {
 .box.error;
}

All I get is the red background, with no border. I've tried many different combinations, but 开发者_如何转开发I always get a syntax error.


I plugged in your less as so:

.box {
   border: 1px solid #333;
   &.error {
      background-color:red; 
   }
}

.error-box {
    .box;
}

and the CSS output was this:

.box {
  border: 1px solid #333;
}
.box.error {
  background-color: red;
}
.error-box {
  border: 1px solid #333;
}
.error-box.error {
  background-color: red;
}

were you wanting the .error-box class to alone receive both styles? The only way I can think of doing that would be:

.error-bg {
    background:red;
}

.box {
    border:1px solid #333;
    &.error {
        .error-bg;
    }
}

.error-box {
    .box;
    .error-bg;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜