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;
     @lin;
    height: @lin;
    background-color: @bck;
    border: @br;

}

 第四步:编辑,运行(这是最重要的一步)

完成以上配置后,直接在所用的HTML文件中集成终端 的提示符中写入以下代码。。。。。。

lessc style.less style.css

优点:less语言的优点:
1、结构清晰,便于扩展
2、可以方便地屏蔽浏览器私有语法差异
3、可以轻松实现多重继承
4、完全兼容 CSS 代码,可以方便地应用到老项目中

原文地址:https://www.cnblogs.com/bigbang66/p/13549902.html