less 的简单使用
(1)、在node.js环境下
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
(使用方法):
第一步:安装
先下载配置Node环境 https://nodejs.org/en/在这下载,版本随意。。
直接点击下一步就可以,安装好后,在node的命令提示符下完成此代码
npm install -g less
第二步:测试
安装完成后,在所建的HTML文件中,右键单击在集成终端中打开,出现提示符,打入以下代码,回车
less -v
第三步:新建项目
新建.css和.less文件,并在HTML文件中引入.css
在less文件中写入代码 运行后在css文件中会出现相应的代码
@wght:bold; @col:red; @qx:oblique; @size:16px; @cen:center; @lin:300px; @bck:blue; @br:5px solid yellow; div { font-weight: @wght; font-style: @qx; color: @col; font-size: @size; text-align: @cen; line-height: @lin; width: @lin; height: @lin; background-color: @bck; border: @br; }
第四步:编辑,运行(这是最重要的一步)
完成以上配置后,直接在所用的HTML文件中集成终端 的提示符中写入以下代码。。。。。。
lessc style.less style.css
优点:less语言的优点:
1、结构清晰,便于扩展
2、可以方便地屏蔽浏览器私有语法差异
3、可以轻松实现多重继承
4、完全兼容 CSS 代码,可以方便地应用到老项目中