(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;
@lin;
height: @lin;
background-color: @bck;
border: @br;
}
第四步:编辑,运行(这是最重要的一步)
完成以上配置后,直接在所用的HTML文件中集成终端 的提示符中写入以下代码。。。。。。
lessc style.less style.css
优点:less语言的优点:
1、结构清晰,便于扩展
2、可以方便地屏蔽浏览器私有语法差异
3、可以轻松实现多重继承
4、完全兼容 CSS 代码,可以方便地应用到老项目中