css – 如何使用LESS动态生成整个类并将其连接到其父选择器

前端之家收集整理的这篇文章主要介绍了css – 如何使用LESS动态生成整个类并将其连接到其父选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
到目前为止,我有这个(LESS语言):

减:

  1. .test(@name) {
  2. (~".sm-@{name}") {
  3. background: ~"url(../images/icons/sm/@{name}-16x16.png)";
  4. }
  5. }

我可以调用它(.test(“facebook”))来生成这样的东西:

CSS:

  1. .sm-facebook {
  2. background: url(../images/icons/sm/facebook-16x16.png);
  3. }

但是,我无法使用通常的& amp;将这个生成的类定义连接到父选择器.操作符.我期待

减:

  1. ul {
  2. li {
  3. &.test("facebook");
  4. }
  5. }

生成

CSS:

  1. ul li.sm-facebook {
  2. background: url(../images/icons/sm/facebook-16x16.png);
  3. }

但我得到一个解析错误.

我怎样才能做到这一点?

解决方法

少了1.4答案

在初次回答的时候,我还没有解决是否有办法在LESS 1.3.3中做到这一点(但后来做了,见下面的更新).我发现当前的LESS 1.4(beta)可以通过这种方式将连接放在mixin中来实现它(请注意参数缺少引号):

  1. .test(@name) {
  2. &.sm-@{name} {
  3. background: ~"url(../images/icons/sm/@{name}-16x16.png)";
  4. }
  5. }
  6.  
  7. ul{
  8. li {
  9. .test(facebook);
  10. }
  11. }

CSS输出

  1. ul li.sm-facebook {
  2. background: url(../images/icons/sm/facebook-16x16.png);
  3. }

如果你需要灵活性来连接或不连接,你可以像这样嵌套mixin(这个默认为attach):

  1. .test(@name,@attach: 1) {
  2. .attach(1) {
  3. &.sm-@{name} {
  4. background: ~"url(../images/icons/sm/@{name}-16x16.png)";
  5. }
  6. }
  7. .attach(0) {
  8. .sm-@{name} {
  9. background: ~"url(../images/icons/sm/@{name}-16x16.png)";
  10. }
  11. }
  12. .attach(@attach);
  13. }

然后像这样使用它.test(facebook);连接,这个.test(facebook,0);将其分隔为子(或独立)类.

更新:无需1.3.1至1.3.3答案

首先更改名称,以便字符串评估与类名称分配分开.关于灵活性的上述其他观点也可用于此答案.

  1. .test(@name) {
  2. @addName: ~"sm-@{name}";
  3. &.@{addName} {
  4. background: ~"url(../images/icons/sm/@{name}-16x16.png)";
  5. }
  6. }

猜你在找的CSS相关文章