在VS Code的上面编译Less文件及Less的优缺点

在VS Code的上面编译Less文件及Less的优缺点

  • Less的优缺点
        • Less的优点:
          • Less缺点

首先我们要知道我们的vs code是哪一个版本的,然后再针对你的这个版本的vs code进行下载插件,我在这里说的是vs code的最新版本的插件下载方式:
我们下载的插件是这样的插件:
在VS Code的上面编译Less文件及Less的优缺点_第1张图片

然后你要知道电脑上面是否安装了node.js了没有,如何查看你是否安装了node.js方法看下图:
第一步:
在VS Code的上面编译Less文件及Less的优缺点_第2张图片
然后在输入node -v 命令就可以查看你是否安装了node.js文件,安装了此文件的窗口显示是下图:
在VS Code的上面编译Less文件及Less的优缺点_第3张图片

编译less文件有三种方法有:
1、可以在客户端进行less.js的使用,但是编译执行这个工作基本上都交给了浏览器了。
2、还可以在服务端上使用less.js,但是使用这个之前就是要安装node.js,然后还要在vs code上面安装一个插件easy less,在就要去在找到settings.json文件,你打开的时候都会出现一些代码但是这些代码没有影响,在就把下面这个代码加入进去了就行了:

"less.compile": {
     
                                    "compress": false, //是否删除多余空白字符,true表示确定删除,false表示否定删除
                                    "sourceMap": false, //是否创建文件目录树,true表示自动生成一个.css.map文件 ${workspaceRoot} \\css ${workspaceRoot} 代表当前项目的根目录,后面路径自行配置。 less和css文件之间的对应关系
                                    "out": true, //是否编译输出文件,这个地方的true和false也是同样的意思
                                    //"outExt":".wxss",//输出文件的后缀,默认为.css 小程序中也是用less
                                }
                            }

3、我们也可以使用koala工具来实现编译

Less的优缺点

Less的优点:

1、可以设置变量。在比较大的工程里面,想要找到某个特定的样式并修改参数无疑是非常困难的,而有了变量设置,可以把所有的样式的值都用变量表示,这样修改某个样式就只需要找到对应的变量就行了。比如bootstrp源码包里就有个variables.less文件,专门用来放变量,当然,比较小的工程没必要费那个劲。

2、可以写混型(mixin)。有点像是预定义的类,有些写法很复杂、字很多的样式,可以先把他写成类,然后在后面直接引用就行了。

3、可以用嵌套的方式写css。其实这一点才是最关键最好用的,本来写css的选择器很是头疼,有些标签要反复写,效率低且易出错,现在用less写,只需要按照html的DOM树方式写一遍,然后在里面加样式就行了。

Less缺点

1、额外的学习成本。虽然会css的人学less很快,但想要写出结构合理、逻辑分明的less还是要多练,另外想要用多个less文件编译成一个css文件(如bootstrap那样),还要另外学专门的编译工具以及配置文件写法(如grunt)。
注: 考拉这款软件很棒,可以即时编译你的less文件,写完less保存一些就能得到css文件, 但美中不足的是,他好像不支持配置编译,只能编译单文件
2、用less编译出的css文件比直接写的稍微大那么一点点,不过现在网速那么快,8k和8.5k的区别是看不出来的。

你可能感兴趣的:(在VS Code的上面编译Less文件及Less的优缺点)