天天看点

CSS扩展语言Less1.安装2.使用 3.插件

        Less是一门向后兼容的CSS扩展语言,让css具有动态性,因为Less和css非常像,而且Less仅对css语言添加了少许方便的扩展,因此很容易学习。

        同样是CSS扩展语言的还有Sass,Sass出现比Less早,安装需要安装Ruby环境,通过服务端处理。Less基于JavaScript,没有裁剪CSS原有的特性,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性,使用较为简单。

        Less主要有变量,混合,嵌套,运算,转义等功能。主要是为了提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性,消除魔术字符串。大大提高了我们的开发效率,减少工作量。

1.安装

在Node.js环境中使用

npm i -g less
           

或cnpm全局安装less

安装好后:

CSS扩展语言Less1.安装2.使用 3.插件

 运用:

lessc -v
           

检查lessc是否安装成功。

CSS扩展语言Less1.安装2.使用 3.插件

2.使用 

        less文件的后缀名是  .less  ,不能直接引入HTML文件中使用,浏览器只能识别css文件,所以在使用时需要把less文件转为css文件,将less文件转为css文件有两种方法。

(1)引入  利用JavaScript开发的用于将Less样式转换成CSS样式的Less.js工具

        less.js文件

(2)命令行转换

        lessc命令

CSS扩展语言Less1.安装2.使用 3.插件

        lessc 写好的less文件  要转化的css文件。

执行后会自动生成一个css文件: 

CSS扩展语言Less1.安装2.使用 3.插件

         然后将css文件引入html进行使用,编译。

3.插件

        在VSCode中有一个比较好的插件 Easy LESS ,这个插件会在你写好less文件保存时,在按下Ctrl+S时,自动生成一个css文件。好用。

CSS扩展语言Less1.安装2.使用 3.插件