html - LessCss/Sass - 访问内部变量？

Question

是否可以访问内部变量？

给定:

  .method() {
       @variable:100:
  } 

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

这有可能吗？

Answer 1

虽然不是您所想的那样，但您可以实现该结果。根据您的风格，您可能需要调整一些东西以适应这个模型。 (无论事物在文件中出现的顺序如何，LESS 在解析引用方面做得很好，但是将依赖项置于调用它们的事物之上是一种有用的组织习惯。)

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

---

请注意，如果您不需要在 .method() 中的其他任何地方使用 @variable，则可以跳过声明。也就是说，如果您想做类似的事情，请声明一个变量

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

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

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

---

编辑:

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

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

1. 如果 .class 需要在不传递参数的情况下工作，您可以为其提供默认值。鉴于

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

.example{.class} 将编译成与 .example{.class(100)} 相同的东西。