Question

我承认我相对较新。在玩它的同时让我的网站尽可能地动态，我试图使用更少的变量，所以如果我不得不改变一些东西，我可以在一个文件中做到。

我尝试定位元素时遇到了一个问题。例如，我有一个当前位于左侧的按钮，但将来我可能想将其移动到右侧。通常情况下，您可以调用left:0;或right:0;

有没有办法让它左转，或右转变量？

我的css看起来像这样

.previous{
    position:fixed; 
    left:0; //The left is what I want to declare somewhere else
    top:@header-padding; 
    height:@side-height; 
    font-size: @button-side-font !important;
}

我尝试了类似

的内容

@{prevPos}: left;

然后调用

@prevPos: 0;

但它刚刚停止加载我的应用程序。

Answer 1

Mixins（更新）

您是否尝试使用mixin？

看起来像这样：

.previous {

    .previous-position();

    font-size: @button-side-font !important;
    height:    @side-height;
    position:  fixed;
    top:       @header-padding;
}

.previous-position() {
    left: 0;
    // right: 0;
}

要左右交换，请更改mixin中的注释。

多班级方法（原始答案）

我实际上采用的方法不同。我没有将按钮样式和定位在同一个CSS规则中，而是在子类中定位。

.previous {
    font-size: @button-side-font !important;
    height:    @side-height;
}

.previous-left,
.previous-right {
    position: fixed;
    top:      @header-padding;
}

.previous-left {
    left: 0;
}

.previous-right {
    right: 0;
}

然后你的按钮看起来像这样：

<a href="#" class="previous previous-left">I am on the left</a>
<a href="#" class="previous previous-right">I am on the right</a>
<a href="#" class="previous">I am not fixed</a>

通过这种方式，您可以非常快速地更新页面，而无需撕开LESS文件，这样可以使您的样式更易于重复使用。

Answer 2

另一个答案是如何让它以可变的方式工作＆＃34;使用老式的方法（故意使用最保守的语法，因此它甚至可以用于古老的编译器）：

@previous-position: right;

.previous {
    position:  fixed;
    margin:    1em;
    font-size: 400%;

    .-(left)  {left:  0}
    .-(right) {right: 0}
    .-(@previous-position);
}

左侧变量较小

2 个答案: