少变量的作用域/上下文

我更少的代码是这样的：少变量的作用域/上下文

body { 
    @var: white; 

    &.blue { @var: blue; } 
    &.red { @var: red; } 
    &.abc { @var: #badass; } 

    background-color: @var; 
}

什么，我希望是，如果body有类.abc变量@var的值是#badass，如果你有类.blue值为blue依此类推。但这不是发生的事情，变量的价值不会独立于他们的遗体类别而改变。

来源

2012-08-07 Oswaldo Acauan

怎么应该知道什么类你附加到你的身体标记？ – Amberlamps 2012-08-07 12:43:25

你试图做的事情是不可能的！你正在用LESS创建一个CSS文件。这与你的HTML无关。 LESS怎么知道你的身体标记在你的标记中分配了什么类？ – Amberlamps 2012-08-07 12:54:23

我很困惑你的评论。 CSS/LESS知道我添加到自己身体的类，那不是我的问题。 – 2012-08-07 13:00:38

你需要创建一个参数的mixin：

.bg(@color){ 
    background-color:@color; 
}

然后将下面的代码将工作：

body { 
    .bg("white"); 

    &.blue{ .bg("blue"); } 
    &.red { .bg("red"); } 
    &.abc { .bg(#bada55); } 

}

你在做什么是不工作的，因为你是重新分配变量 - 完美的工作，但不能为课程写出新的价值。（如果LESS创建新的规则，每次只是重新分配一个变量都是毫无意义的。）另外，与其他编程语言一样，LESS也有范围，因此当它达到background-color: @var;时@var的值为white分配给它并据此创建规则。这下面的工作（但没有任何意义）：

body { 
    @var: white; 

    &.blue{ @var: blue; background-color: @var;} 
    &.red { @var: red;  background-color: @var;} 
    &.abc { @var: #bada55; background-color: @var;} 
    background-color: @var; 
}

来源

2012-08-07 12:46:36 Christoph

我正在这样做，但我想知道是否有可能在LESS中执行类似上述代码的操作。但感谢回复:) – 2012-08-07 12:48:46

@Oswaldo我编辑了我的答案，解释了为什么你的尝试不起作用。 – Christoph 2012-08-07 12:57:34

Thx，现在我明白了为什么不工作..我想这个范围是在其他程序语言中给出的，像这样的代码： 'var abc ='white'; （'body'）。hasClass（'blue'））{abc ='blue'} $（'body'）。css（'background-color'，abc）;' – 2012-08-07 13:03:53

少变量的作用域/上下文

回答

相关问题