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 代码，可以方便地应用到老项目中