LESS CSS动态类名

我正在写这个LESS文件，我有点卡住了。LESS CSS动态类名

的代码如下：

.flag (@code) { 
    (~'[email protected]{code}') { 
     + label { 
      &:after { 
       background-image: url('images/flags/@{code}.png'); 
      } 
     } 
    } 
} 

input[type='radio'] { 
    &.flag { 
     .flag(us); 
    } 
}

眼下，这将产生下面的CSS（注意.flag和页面没有自动跳转之间的空间）

input[type='radio'].flag .us + label:after { 
    background-image: url('images/flags/us.png'); 
}

但是，我的结果寻找应该如下：

input[type='radio'].flag.us + label:after { 
    background-image: url('images/flags/us.png'); 
}

很显然，我需要的组合子（&）某处。但我似乎无法弄清楚究竟在哪里。我迄今为止所尝试的所有内容都会导致解析错误或不良结果。是否有可能开始？

任何帮助，将不胜感激。

来源

2012-08-15 andy

有一个功能请求允许&逃脱选择器或应付这种情况下，但我不认为现在有一个解决办法。如果你找到一个我想知道的。

来源

2012-08-15 21:10:38

[晚的答案，但最好是有一个在这里]

由于LESS 1.3.1（2012年10月），可以使用的，而不是[email protected]{classname}向(~"@{classname}")动态生成的类名，然后允许在LESS使用&在课前和验证码

：

.flag (@code) { 
    &[email protected]{code} { 
     + label { 
      &:after { 
       background-image: url('images/flags/@{code}.png'); 
      } 
     } 
    } 
} 
input[type='radio'] { 
    &.flag { 
     .flag(us); 
    } 
}

将产生所需CSS：

input[type='radio'].flag.us + label:after { 
    background-image: url('images/flags/us.png'); 
}

来源

2013-04-29 05:29:28

LESS CSS动态类名

回答

相关问题