首页 > 代码库 > 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入门