Convert percentage value to number in LESS

Question

I need to convert percentage value (51%) to number (0.51)

What is the best way to do this?

My less snippet

// Gradients
#gradient {
    .vertical-gloss(@startColor: #555, @endColor: #333, @firstColorStop:50%, @secondColorStart:51%) {
        background-image: linear-gradient(bottom, @startColor @firstColorStop, @endColor @secondColorStart);
        background-image: -o-linear-gradient(bottom, @startColor @firstColorStop, @endColor @secondColorStart);
        background-image: -moz-linear-gradient(bottom, @startColor @firstColorStop, @endColor @secondColorStart);
        background-image: -webkit-linear-gradient(bottom, @startColor @firstColorStop, @endColor @secondColorStart);
        background-image: -ms-linear-gradient(bottom, @startColor @firstColorStop, @endColor @secondColorStart);
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, @startColor), color-stop(0.51, @startColor));
        background-repeat: repeat-x;
  }
}

Answer 1

1. Use the unit function to convert 50% to 50.
2. Divide the result by 100. Don't forget to wrap the calculation within parentheses (parentheses are optional in LESS 1.3, but required in LESS 1.4).

For readability, I've used an auxiliary variable, as seen below:

.vertical-gloss(@startColor: #555, @endColor: #333, @firstColorStop:50%, @secondColorStart:51%) {
    @firstColorStopPerc: (unit(@firstColorStop) / 100);
    @secondColorStopPerc: (unit(@secondColorStart) / 100);
    /* ... skipped non-relevant pieces ... */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(@firstColorStopPerc, @startColor), color-stop(@secondColorStopPerc, @startColor));
    background-repeat: repeat-x;
}