左側的變量較少

我承認我相對較少。在使用它來使我的網站儘可能動態時，我試圖使用較少的變量，因此如果必須更改某些內容，我可以在一個文件中完成。左側的變量較少

雖然試圖定位元素，但我遇到了一個問題。例如，我有一個當前坐在左側的按鈕，但將來我可能想將它移動到右側。通常你打電話的方式是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;

，但它只是完全停止加載我的應用程序。

來源

2014-05-22 zazvorniki

見[Property Interpolation]（http://lesscss.org/features/#variables-feature-properties）。 –

@ seven-phases-max這就是我無法工作的原因 – zazvorniki

很可能是因爲您使用了過時的Less編譯器。 –

混入（更新）

您是否嘗試過使用mixin？

它可能看起來像這樣：

.previous { 

    .previous-position(); 

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

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

要交換的左側和右側，更改混入的註釋。

多個類的方法（原來的答覆）

其實我不同的方法處理這個。而不是按鈕樣式和定位在相同的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文件很快更新頁面，它使您的樣式更可重用。

來源

2014-05-22 14:51:52

我無法添加單獨的類，整個問題是他們不得不在一個文件中更改一個單詞，而不是在發生某些更改時通過多個文件進行挖掘。 – zazvorniki

我可以在另一個班級中調用該功能嗎？我嘗試將它添加到我的變量文件中，然後在我的主文件中調用它，並且它給了我錯誤無法識別的輸入 – zazvorniki

它應該沒問題，應該可以將它添加到任何類中，而不管它的名稱（除非您致電class'previous-position'，與mixin名稱相同）。將它添加到變量文件（或變量文件旁邊的「mixins」文件）當然是我添加它的地方。 –

而另一個答案如何得到它的「變量的方式」使用老式的方法工作（有意使用最保守的語法，因此它可以用古老的編譯器甚至工作）：

@previous-position: right; 

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

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

來源

2014-05-22 15:52:55

左側的變量較少

回答

相關問題