Less 安装

  • LESS的系统要求

    操作系统-跨平台
    浏览器支持情况:
    Internet Explorer/Edge Chrome FireFox Safari Opera
    9.0(含)以上支持 6.0(含)以上支持 4.0(含)以上支持 5.0(含)以上支持 11.1(含)以上支持
  • 安装 LESS

    现在让我们了解LESS的安装。

    步骤1

    我们需要NodeJ来运行LESS示例。 要下载NodeJ,请打开链接https://nodejs.org/en/,您将看到如下所示的屏幕-
    nodejs
    下载zip文件的最新功能版本。

    步骤2

    运行安装程序以在系统上安装Node.js。

    步骤3

    接下来,通过NPM(节点程序包管理器)在服务器上安装LESS。 在F盘新建一个lesscode文件夹下命令提示符下运行以下命令,先全局安装再安装到开发环境。
    PS F:\lesscode> npm install -g less
    PS F:\lesscode> npm install less -save-dev
    
    

    步骤4

    成功安装LESS之后,您将在命令提示符下看到以下行,将你的less全局安装到C盘的nodejs的NPM 管理文件中:
    PS F:\lesscode> npm install -g  less
    npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
    C:\Users\Administrator\AppData\Roaming\npm\lessc -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc
    + less@3.11.3
    added 61 packages from 124 contributors in 13.371s
    PS F:\lesscode>
    
    
  • 示例

    以下是LESS的简单示例。

    hello.html

    <!doctype html>
    <head>
        <link rel = "stylesheet" href = "style.css" type = "text/css" />
    </head>
    <body>
        <h1>欢迎来到菜鸟教程</h1>
        <h3>Hello!!!!!</h3>
    </body>
    </html>
    
    
    现在让我们创建一个与CSS非常相似的文件style.less,唯一的区别是它将以.less扩展名保存。 .html和.less这两个文件都应在F盘的文件夹lesscode内创建。

    style.less

    @primarycolor: #FF7F50;
    @color:#800080;
    h1 {
        color: @primarycolor;
    }
    
    h3 {
        color: @color;
    }
    
    
    使用以下命令将style.less文件编译为style.css-
    lessc style.less style.css
    
    
    下图是F盘下的lesscode文件目录结构:
    less
    当您运行上述命令时,它将自动创建style.css文件。 每当您更改LESS文件时,都需要在cmd中运行上述命令,然后style.css文件将得到更新。
    运行以上命令时,style.css文件将具有以下代码-

    style.css

    h1 {
      color: #FF7F50;
    }
    
    h3 {
      color: #800080;
    }
    
    
  • 输出结果

    现在让我们执行以下步骤,看看上面的代码如何工作-
    将上面的html代码保存在hello.htm文件中。
    在浏览器中打开此HTML文件,将显示以下输出。
    less