less-运算-526互联

 //注意:
 //   运算时. 数值和单位之间不能有空格
 //   减法操作符号左右要留空格.
 //   除法要用括号括起来.
 //   加,减 之前会自动进行单位换算. 以左侧操作数的单位为准.
 //   例如: `@base: 2cm * 3mm; // 结果是 6cm`
 //   如果单位换算无效或失去意义,则结果就没有单位.
 //   甚至可以对颜色进行算术运算. background-color: #112244 + #111; // 结果是 #223355

@width: 400px;
@height: @width - 100; // 减法运算 要有空格.
@font-size: 20px;

.box1 {
    width: @width;
    height: @height;
    line-height: @height;
    background-color: #eee;
    overflow: auto;
    border: 1px solid lightgray;
    border-radius: 4px;

    //通过margin让子元素居中对齐
    .inner {
        width: (@width/10);  //除法要有括号,才可以计算
        height: (@width/10);
        background-color: lavenderblush;
        margin: ((@height - (@width/10))/2) auto;
        filter: ~'alpha(opacity:50)';  // 不让less编译原样输出到css
    }
}