Question

现在我正在使用LESS自定义Bootstrap到我自己的网站。我对LESS的mixins有问题。

例如，以下LESS代码：

.Article {
  margin-left: 5px;
  .Small {
      color: #111;
  }
}
.Small {
    font-size: 5px;
}

.MyArticle {
  .Article;
  .Address {
    .Small;
  }
}

编译为以下CSS：

.Article {
  margin-left: 5px;
}
.Article .Small {
  color: #111;
}
.Small {
  font-size: 5px;
}
.MyArticle {
  margin-left: 5px;
}
.MyArticle .Small {
  color: #111;
}
.MyArticle .Address {
  color: #111;
}

但是，除了上面生成的CSS之外，我想让“.MyArticle .Address”变小：

.MyArticle .Address {
  font-size: 5px;
}

最好的方法是什么？

编辑：

在上面的LESS代码示例中，.Article和.Small是库的类，我不想修改它们。

Answer 1

不太确定，但可能是这段代码：

.Article {
  margin-left: 5px;
  .Small {
      color: #111;
  }
}
.Small {
    font-size: 5px;
}

.MyArticle {
  .Article;
  .Address {
    .Small;
    font-size: 5px;
  }
}

Answer 2

尝试extend：

.Article {
  margin-left: 5px;
  .Small {
      color: #111;
  }
}
.Small {
    font-size: 5px;
}

.MyArticle {
  .Article;
  .Address {
    &:extend(.Small);
  }
}

这编译为：

.Article {
  margin-left: 5px;
}
.Article .Small {
  color: #111;
}
.Small,
.MyArticle .Address { //<-- this
  font-size: 5px;
}
.MyArticle {
  margin-left: 5px;
}
.MyArticle .Small {
  color: #111;
}

Answer 3

问题是确定范围

在您的原始布局中，通过将.Article与.Address定义在同一级别，然后使用.Small中的.Article作为唯一的混音，因为它是＆＃34; local＆＃34; .Small上下文中的.Address。为避免这种情况，.Article必须与其自己的块隔离。但是你失去了从它.Small中拾取的颜色，所以它必须通过命名空间调用显式地包含回.Address。代码最终如下：

<强> LESS

.Article {
  margin-left: 5px;
  .Small {
      color: #111;
  }
}
.Small {
    font-size: 5px;
}

.MyArticle {
  .Address {
     .Small;
     .Article > .Small;
  }
  & {.Article;}
}

CSS输出

.Article {
  margin-left: 5px;
}
.Article .Small {
  color: #111;
}
.Small {
  font-size: 5px;
}
.MyArticle {
  margin-left: 5px;
}
.MyArticle .Address {
  font-size: 5px;
  color: #111;
}
.MyArticle .Small {
  color: #111;
}

混合用于嵌套和非嵌套规则

3 个答案:

问题是确定范围