Question

是否可以访问内部变量？

鉴于：

  .method() {
       @variable:100:
  } 

 .class {
       z-index:.method.@variable;
 }

这有可能吗？

Answer 1

不是你想的确切方式，但你可以实现这个结果。根据您的样式，您可能需要调整以适应此模型。（LESS在解决引用方面做得很好，无论文件中出现的顺序如何，但是将依赖项放在调用它们的东西之上是一种有用的组织习惯。）

.class(@x) {
    z-index: @x;
}
.method() {
    @variable: 100;
    .class(@variable);
}

请注意，如果您不需要在@variable内的任何其他位置使用.method()，则可以跳过声明。也就是说，如果你想做类似

的事情，请声明一个变量

.method() {
    @variable: 100;
    .class(@variable);
    padding-right: unit(@variable,px);
}

如果您不需要变量，请自行保存该行：

.method() {
    .class(100);
    color: red;
}

修改

如果您希望能够将值传递给.method，请让mixin接受参数而不是在mixin中定义变量。有了这个，您可以同时执行.example {method(100)}和.example{method(200)}。

.class(@x) { z-index: @x; } .method(@x) { .class(@x); }

如果.class需要能够在不传递参数的情况下工作，则可以为其提供默认值。给定

.class(@x:100) { z-index: @x }

.example{.class}将编译为与.example{.class(100)}相同的内容。

Answer 2

我不确定我是否理解你的问题，但我有一个解决方案，我希望你发现它有用：

在Less：

.method(){  
  @variable:100;
}

.method2(){  
  @variable:200;   
}

.class {
  .method();
  z-index:@variable;
 } 

.class2 {
  .method2();
  z-index:@variable;
}

在SASS

@function method() {
    $variable: 100;
    @return $variable;
}
@function method2() {
    $variable: 200;
    @return $variable;
}

.class {
  z-index: method();
} 

.class2 {
  z-index: method2();
}

SASS / LESS的CSS输出：

.class {
  z-index: 100;
}

.class2 {
  z-index: 200;
}

LessCss / Sass - 访问内部变量？

2 个答案: