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

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

自 LESS 1.7 起

您可以通过 rulesets 在变量中包含属性值，就像这样(注意括号和分号后面；附注 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;};

变量分配规则集的使用很像混合(注意调用中的括号)，所以:

.yourClass {
    @relative();
}

产生:

.yourClass {
  position: relative;
}

可变规则集与 mixin 的区别在于您不能将参数传递给规则集(无论如何直接)，但规则集本身可以作为参数传递给 mixin。此外，可变规则集将覆盖以前的定义(无论定义的属性如何)，而混合将合并属性值。规则集适用于固定值，例如您的某些元素。它们可以间接参数化，像这样:

@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，但有一些不同于与变量相关的限制和优势。