Question

所以当我决定为边距和填充创建一个变量以及其他一些定位时，我写了一些代码。但是当我尝试时，我会遇到错误。

这就是我的代码：

//Positioning
@margin_t: margin-top:0;
@margin_r: margin-right:0;
@margin_l: margin-left:0;
@margin_b: margin-bottom:0;

@padding_t: padding-top:0;
@padding_r: padding-right:0;
@padding_l: padding-left:0;
@padding:_b: padding-bottom:0;

@center: text-align: center;
@left: text-align: left;
@right: text-align: right;

@relative: position: relative;
@justify: position: justify;

任何人都可以给我两美分吗？谢谢！

Answer 1

截至1月17日

您可以按rulesets将变量中的属性值包括在内（请注意括号和分号; ps position: justify is not valid，我已将其更改为absolute）：

//Positioning
@margin_t: {margin-top:0;};
@margin_r: {margin-right:0;};
@margin_l: {margin-left:0;};
@margin_b: {margin-bottom:0;};

@padding_t: {padding-top:0;};
@padding_r: {padding-right:0;};
@padding_l: {padding-left:0;};
@padding:_b: {padding-bottom:0;};

@center: {text-align: center;};
@left: {text-align: left;};
@right: {text-align: right;};

@relative: {position: relative;};
@absolute: {position: absolute;};

变量分配规则集与mixin非常相似（请注意调用中的括号），所以：

.yourClass {
    @relative();
}

产地：

.yourClass {
  position: relative;
}

变量规则集与mixin的不同之处在于您无法将参数传递给规则集（直接无论如何），但规则集本身可以作为参数传递给mixin。此外，变量规则集将覆盖先前的定义（无论属性定义），而mixins将合并属性值。规则集适用于固定值，例如您的某些项目。它们可以间接参数化，如下所示：

@margin_t: {margin-top: @tm;};

.yourClass {
    @tm: 0;
    @margin_t();
}

当一个人希望将传递给混合一组属性或一个未知的动态属性时，可变规则集实际上最有效。作为后者的一个示例，假设您知道要为元素设置单个边距，但根据某些上下文，您不知道要设置哪个，因此您需要一种方法来处理它。然后可以做这样的事情：

@margin_t: {margin-top: @value;};
@margin_r: {margin-right: @value};
@margin_l: {margin-left: @value;};
@margin_b: {margin-bottom: @value;};

.set-a-margin(@prop; @value: 0;) {
    @prop();
}

.yourClass {
    .set-a-margin(@margin_r; 10px);
}

.anotherClass {
    .set-a-margin(@margin_b; 5px);
}

产地：

.yourClass {
  margin-right: 10px;
}
.anotherClass {
  margin-bottom: 5px;
}

基本上，变量分配的规则集只提供了另一种方法，可以使用LESS来编码您想要编码的方式。它们可以提供一些功能，例如mixins，具有与变量相关的某些限制和优点。

Answer 2

你没有设定整个风格。你会做@margin_t: 0;

然后使用它

.myClass { margin-top: @margin_t; }

Answer 3

首先，像这样定义你的mixins：

.margin_t {
    margin-top: 0;
}
.margin_b (@value: 0) {
    margin-bottom: @value;
}

然后只是使用它！

body {
    .margin_t();
    .margin_b(15px);
}

如何将任何定位写入LESS变量？

3 个答案:

截至1月17日