2013-05-31 70 views
3

我需要百分比值(51%)转换成数(0.51)转换百分比值在更短的

什么是做到这一点的最好办法是多少?

我少片断

// 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; 
    } 
} 

回答

6
  1. 使用unit function转换50%到50
  2. 除以100的结果不要忘记wrap the calculation within parentheses(括号是可选的LESS 1.3,但需要在少量1.4)。

为了可读性,我使用的辅助变量,如下所示:

.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; 
}