首页 > 代码库 > less入门
less入门
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.lessmkdir less cd less touch test.less// 书写less代码后,使用lessc命令编译// 编译当前.less文件,并输出到test.csslessc 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引入的特性很好的解决了这些痛点,能够很好地看清楚层次结构,方便修改等;
less入门