Less Variables on left side - css

Question

I admit I am fairly new to less. While playing with it to make my site as dynamic as possible I was trying to use less variables so if I had to change something I could just do it in one file.
I have run across an issue though when trying to position elements. For example I have a button that is currently sitting on the left side, but in the future I may want to move it to the right. Normally how you call that is either left:0; or right:0;
Is there a way to make that left, or right a variable?
My css looks like this
.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;
}
I have tried something like
#{prevPos}: left;
and then calling
#prevPos: 0;
but it just stopped loading my application altogether.

Answer 1

Mixins (update)
Have you tried using a mixin?
It could look something like this:
.previous {
.previous-position();
font-size: #button-side-font !important;
height: #side-height;
position: fixed;
top: #header-padding;
}
.previous-position() {
left: 0;
// right: 0;
}
To swap the left and right, change the comment in the mixin.
Multiple classes approach (original answer)
I'd actually approach this differently. Instead of having the button styles and positioning in the same CSS rule, I'd have the positioning in a sub-class.
.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;
}
Then your buttons look like this:
I am on the left
I am on the right
I am not fixed
This way you can update your page pretty quickly without having to tear apart your LESS files and it makes your styles more re-usable.

Answer 2

And yet another answer for how to get it to work in a "variable way" using old-fashioned method (intentionally using the most conservative syntax so it could work even with ancient compilers):
#previous-position: right;
.previous {
position: fixed;
margin: 1em;
font-size: 400%;
.-(left) {left: 0}
.-(right) {right: 0}
.-(#previous-position);
}