less入门

Posted 2020-09-29 RocketV2

less是一门CSS预处理语言，增加了变量，Mixin，函数等特性，使得CSS更加方便维护，开发；

less可以运行在Node或者浏览器，但最终都是将.less文件转换成.css文件，因为浏览器渲染时只能识别.css文件；

1.不同情况下使用less编译器编译less文件

　　1.1 使用less编译器手动编译

　　　　在nodejs环境中，通过npm全局安装less编译器，手动编译.less文件；这种方式简单粗暴，效率低下，如果项目中有很多.less文件，缺点显而易见，不过这不失是了解less的简单方式；以下是具体的使用方式：

// 全局安装less编译器
npm install less -g 
// 安装好之后，新建文件夹less，新建文件test.less
mkdir less    cd less    touch test.less
// 书写less代码后，使用lessc命令编译
// 编译当前.less文件，并输出到test.css
lessc test.less test.css

　　　　当然lessc命令也有自己的参数，比如--clean-css(表示编译后进行压缩，要安装less-plugin-clean-css插件)等;

// 安装less-plugin-clean-css插件
sudo npm install less-plugin-clean-css -g
// 使用参数--clean-css压缩
lessc --clean-css test.less test.min.css

 　　1.2 sublime text 3中使用less

　　　　sublime text是前端开发神器，同时提供了大量的插件包可以完成各种任务；在sublime中编辑，编译less文件无疑是一件快乐的事；在sublime text3中用到的插件为：less，less2css，想要正确地使用这两个插件需要提前全局安装less编译器；

// 第一步：全局安装less编译器，以及插件less-plugin-clean-css
// 如果不安装编译器或者压缩插件，在使用时会报错，具体为何报错，下面步骤阐述
sudo npm install less  less-plugin-clean-css -g

// 第二步：安装 less插件  这是less语法高亮插件

// 第三步：安装less2css插件，在保存.less文件时会在同级目录下生成名称相同的.css文件；虽然less2css原本是sublime2的插件，但是sublime3也可以使用；

　　　　在上述安装过程中，如果不提前安装less编译器以及less-plugin-clean-css插件，在保存less文件时报错，原因如下：less2css插件并没有封装less编译器等，因此不具备编译能力，less2css插件在用户command+s/ctrl+s保存时，也要调用系统中已经安装好的less编译器，如果没有安装编译器肯定报错；less-plugin-clean-css插件功能是压缩代码，在保存时除了调用了编译器同时也调用了压缩代码的插件，所以也要安装此插件；

 　　1.3 grunt/gulp构建工具中使用less

　　　　grunt／gulp构建工具中同样可以使用less，个人比较喜欢gulp流式工作流程；在这两个构建工具中使用less不作简述，以下是参考文档：

　　　　grunt中使用less：https://www.npmjs.com/package/grunt-contrib-less

　　　　gulp中使用less：https://www.npmjs.com/package/gulp-less

 

 

 

 

 

如何使用less，比如浏览器中，先写好.less文件，在通过编译器编译成.css文件，有很多第三方编译器；

或者通过sublime text将less文件编译成css文件

或者在grunt，gulp中通过less插件，在打包的时候将.less文件转换成.css文件

或者webpack，安装less,less-loader,

或者在vuejs框架的单文件组件中如何使用less，使用的是webpack模块打包器

 

less 基础学习

　　预编译语言less方便了对html样式的操作，引入了变量，Mixni，函数等；不像以前写css那样一行行的写，而且父子节点样式之间没有层次结构，很多像width／height等属性数值写死，这在后期维护中十分的麻烦；less引入的特性很好的解决了这些痛点，能够很好地看清楚层次结构，方便修改等；