如何将任何定位写入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

截至1月17日

您可以通过规则集在变量中包含属性值,如下所示(注意括号和分号后面; ps position: justify 无效,我已将其更改为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,具有与变量相关的某些限制和优点.