130_less的补充（@import引入文件、vscode配置less、less的避免编译）

less源码：

//可以通过import来将其他的less引入到当前的less中，相当于拷贝了一遍
//这里引用的是第129章笔记中的less源码
@import "syntax.less";

.box1 {
    // 在less中所有的数值都可以直接进行运算
    // + - * /
    width: 100px + 100px;
    height: (100px/2);
    background-color: #bfa;
}

编译后的css源码：

对比以下两张图，看看实际上就是将引入的less文件和当前less文件中的内容合并，然后共同生成css代码

引入前：

引入后：

运用less的引入，可以将项目模块化，比如变量放一个less文件中，函数放一个less中等等，分功能存放，这样想用哪些功能就可以新建一个less文件，直接引入不同功能的less就好了。

浏览器调试的问题：

在浏览器里打开“开发人员工具”，我们所看到的样式是css文件里的样式，显示代码的位置也是css文件中代码的位置，但是运用less的话我们就不能改css了，因为css是由less生成的，这时候我们想要浏览器里面显示的是代码在less中的位置，我们需要自己配置Visual Studio Code编译器Easy LESS插件里面的json文件，配置方法如下：视频链接

如果视频没看懂，那么当你的插件配置成以下样式就行了：

{
    "less.compile": {
        "compress": true, // true => remove surplus whitespace
        "sourceMap": true, // true => generate source maps (.css.map files)
        "out": true // false => DON'T output .css files (overridable per-file, see below)
    }
}

下面看浏览器里面的效果：

配置前：

配置后：

补充知识：less避免编译

less源码：

* {
    margin: 100 + 100px;
    width: ~'calc(200px*2)'; // 这样可以将引号里的内容原封不动写入css
}

css源码：

* {
  margin: 200px;
  width: calc(200px*2);
}
/*# sourceMappingURL=./index.css.map */