(less) calc运算为什么不生效? 变量如何使用?

less样式预处理器

calc运算为什么不生效?
变量如何使用?

======答案如下见代码:

<template>
  <div class="outer">
    <div class="top"></div>
    <div class="box">hello world</div>
    <div class="con"></div>
    <div class="bot"></div>
  </div>
</template>

<script>
export default {
  name: 'less',
};
</script>

<style lang="less" scoped>
//1.less定义变量名
@color:rgb (135, 118, 118);
@width: 300px;
@height: 200px;
@border:1px solid #999;
@background: red;
.extends {
  width: @width;
  height: @height;
  border: @border;
}
.maps {
  width: 200px;
  height: 200px;
  background: gray;
}
.outer {
  @background: green;
  .top {
    .extends();
    //2.作用域,本地查找变量和混合，如果找不到，则从“父”级作用域继承。
    background: @background;
  }
  .box {
    //3.混合是从一个规则集包含（或混入）到另一个规则集的方法。
    .extends();
  }
  .con {
    //4.混合和映射结合使用,弥补less中不能自定义函数的缺陷
    width: .maps() [width];
    height: .extends() [height];
    background: @background;
  }
  .bot {
    //5.calc运算
    width: calc(10%+@width); //不生效
    width: calc(10% + @width); //一定要加空格才会识别是运算
    //或者通过~转义,允许你使用任意字符串作为属性或变量值
    //但要注释若运算中包含变量需要使用{},或()包裹起来
    width: calc(~'10% + @{width}');
    width: calc(~'10%' + (@width));
    //多个元素运算变量使用如下
    width: calc(~'10% + ' (@width) ~' + 50px');
    height: @height;
    border: @border;
  }
}
</style>