前端学习笔记90-less补充

算数运算

less可以进行直接算数运算，不过得注意，我发现除法得加括号。
less代码：

.box1{
    width: 100px+100px;
    height: 100px-10px;
    margin: (10px/2) 30px*3;
    background-color: #bfa;
}

css对应代码：

.box1 {
  width: 200px;
  height: 90px;
  margin: 5px 90px;
  background-color: #bfa;
}

import引入

可以引入其他的less文件。
这里我把上一节最后的代码放在style2.less文件里。

less代码：

@import "style2.less";
.box1{
    width: 100px+100px;
    height: 100px-10px;
    margin: (10px/2) 30px*3;
    background-color: #bfa;
}

css对应代码：

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background-color: #bfa;
}
body:hover {
  background-color: #22aa00;
}
.box1 {
  width: 200px;
  height: 90px;
  margin: 5px 90px;
  background-color: #bfa;
}

这个的好处就是我们可以将不同效果或不同块的less分开，这样维护的时候就很方便。

调试问题

当我们编写代码时，查看网页源码发现某一行写错了，要改。这个时候因为我们是用很多个less组成的css文件，那么怎么从css知道是对应的哪个less文件且是哪一行呢？
打开easy less插件，里面有一个这个。

操作步骤：
1复制上图的几行代码，不包含最外面的大括号。
2打开设置，找打下图这个。

3点这里

4把刚刚的代码放进去

5 改代码
这三行代码中第一行是压缩设置，改成false。第二行是源码地图设置，为true，第三行为css文件输出，改为true。

6重新保存我们的文件，可以看到多了一个文件。

6打开网页源码，发现有显示是哪个less和第几行。