上一节:
下一节:

  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
上一节:
下一节: