如何使用 Less 在另一个类中应用串联类？

发布于 2024-12-06 15:52:18 字数 325 浏览 1 评论 0原文

假设我有以下 Less 设置：

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

如果我想声明另一个应用 .box.error 完整样式的类，例如 .error-box ，正确的语法是什么？

如果我使用：

.error-box {
 .box.error;
}

我得到的只是红色背景，没有边框。我尝试了许多不同的组合，但总是出现语法错误。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

强辩 2024-12-13 15:52:18

我像这样插入了你的 less：

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

.error-box {
    .box;
}

CSS 输出是这样的：

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

你想要 .error-box 类单独接收两种样式吗？我能想到的唯一方法是：

.error-bg {
    background:red;
}

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

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

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 原文

~没有更多了~