LESS - 快速指南

LESS - 概述

LESS 是一种 CSS 预处理器，可为网站提供可自定义、可管理和可重复使用的样式表。LESS 是一种动态样式表语言，可扩展 CSS 的功能。LESS 还支持跨浏览器。

CSS 预处理器是一种脚本语言，可扩展 CSS 并将其编译为常规 CSS 语法，以便您的 Web 浏览器可以读取它。它提供变量、函数、混合和操作等功能，可让您构建动态 CSS。

为什么是 LESS?

现在让我们了解一下为什么使用 LESS。

LESS 支持更快、更轻松地创建更简洁、跨浏览器友好的 CSS。
LESS 是用 JavaScript 设计的，也可在 live 中使用，其编译速度比其他 CSS 预处理器更快。
LESS 以模块化方式保存您的代码，这非常重要，因为它使代码可读且易于更改。
使用 LESS 可以实现更快的维护变量。

历史

LESS 由 Alexis Sellier 于 2009 年设计。LESS 是开源的。LESS 的第一个版本是用 Ruby 编写的;在后来的版本中，Ruby 的使用被 JavaScript 所取代。

特点

可以有组织地编写更干净、更易读的代码。
我们可以定义样式，并且可以在整个代码中重复使用。
LESS 基于 JavaScript，是 CSS 的超集。
LESS 是一种敏捷工具，可以解决代码冗余问题。

优点

LESS 可轻松生成适用于各种浏览器的 CSS。
LESS 通过使用嵌套，使您能够编写更好、组织良好的代码。
通过使用变量。
LESS 使您能够通过在规则集中引用它们来轻松重用整个类。
LESS 提供操作的使用，使编码更快并节省时间。

缺点

如果您是 CSS 预处理新手，则需要花时间学习。
由于模块之间紧密耦合，应付出更多努力来重用和/或测试依赖模块。
与 SASS 等较旧的预处理器相比，LESS 的框架较少，后者由框架Compass、Gravity 和 Susy组成。

LESS - 安装

在本章中，我们将逐步了解如何安装 LESS。

LESS 的系统要求

操作系统 − 跨平台
浏览器支持 − IE (Internet Explorer 8+)、Firefox、Google Chrome、Safari。

LESS 的安装

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

步骤 1 − 我们需要 NodeJs 来运行 LESS 示例。要下载 NodeJs，请打开链接 https://nodejs.org/en/，您将看到如下所示的屏幕 −

下载 Latest Features 版本的 zip 文件。

步骤 2 − 运行安装程序以在您的系统上安装 Node.js。

步骤 3 − 接下来，通过 NPM(Node 包管理器)在服务器上安装 LESS。在命令提示符中运行以下命令。

npm install -g less

第 4 步 − 成功安装 LESS 后，您将在命令提示符中看到以下几行 −

`-- less@2.6.1
   +-- errno@0.1.4
   | `-- prr@0.0.0
   +-- graceful-fs@4.1.3
   +-- image-size@0.4.0
   +-- mime@1.3.4
   +-- mkdirp@0.5.1
   | `-- minimist@0.0.8
   +-- promise@7.1.1
   | `-- asap@2.0.3
   +-- request@2.69.0
   | +-- aws-sign2@0.6.0
   | +-- aws4@1.3.2
   | | `-- lru-cache@4.0.0
   | |   +-- pseudomap@1.0.2
   | |   `-- yallist@2.0.0
   | +-- bl@1.0.3
   | | `-- readable-stream@2.0.6
   | |   +-- core-util-is@1.0.2
   | |   +-- inherits@2.0.1
   | |   +-- isarray@1.0.0
   | |   +-- process-nextick-args@1.0.6
   | |   +-- string_decoder@0.10.31
   | |   `-- util-deprecate@1.0.2
   | +-- caseless@0.11.0
   | +-- combined-stream@1.0.5
   | | `-- delayed-stream@1.0.0
   | +-- extend@3.0.0
   | +-- forever-agent@0.6.1
   | +-- form-data@1.0.0-rc4
   | | `-- async@1.5.2
   | +-- har-validator@2.0.6
   | | +-- chalk@1.1.1
   | | | +-- ansi-styles@2.2.0
   | | | | `-- color-convert@1.0.0
   | | | +-- escape-string-regexp@1.0.5
   | | | +-- has-ansi@2.0.0
   | | | | `-- ansi-regex@2.0.0
   | | | +-- strip-ansi@3.0.1
   | | | `-- supports-color@2.0.0
   | | +-- commander@2.9.0
   | | | `-- graceful-readlink@1.0.1
   | | +-- is-my-json-valid@2.13.1
   | | | +-- generate-function@2.0.0
   | | | +-- generate-object-property@1.2.0
   | | | | `-- is-property@1.0.2
   | | | +-- jsonpointer@2.0.0
   | | | `-- xtend@4.0.1
   | | `-- pinkie-promise@2.0.0
   | |   `-- pinkie@2.0.4
   | +-- hawk@3.1.3
   | | +-- boom@2.10.1
   | | +-- cryptiles@2.0.5
   | | +-- hoek@2.16.3
   | | `-- sntp@1.0.9
   | +-- http-signature@1.1.1
   | | +-- assert-plus@0.2.0
   | | +-- jsprim@1.2.2
   | | | +-- extsprintf@1.0.2
   | | | +-- json-schema@0.2.2
   | | | `-- verror@1.3.6
   | | `-- sshpk@1.7.4
   | |   +-- asn1@0.2.3
   | |   +-- dashdash@1.13.0
   | |   | `-- assert-plus@1.0.0
   | |   +-- ecc-jsbn@0.1.1
   | |   +-- jodid25519@1.0.2
   | |   +-- jsbn@0.1.0
   | |   `-- tweetnacl@0.14.1
   | +-- is-typedarray@1.0.0
   | +-- isstream@0.1.2
   | +-- json-stringify-safe@5.0.1
   | +-- mime-types@2.1.10
   | | `-- mime-db@1.22.0
   | +-- node-uuid@1.4.7
   | +-- oauth-sign@0.8.1
   | +-- qs@6.0.2
   | +-- stringstream@0.0.5
   | +-- tough-cookie@2.2.2
   | `-- tunnel-agent@0.4.2
   `-- source-map@0.5.3

示例

以下是 LESS 的一个简单示例。

hello.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

现在让我们创建一个与 CSS 非常相似的文件 style.less，唯一的区别是它将以 .less 扩展名保存。.html 和 .less 这两个文件都应在文件夹 nodejs 内创建。

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

运行上述命令时，它将自动创建 style.css 文件。每当您更改 LESS 文件时，都需要在 cmd 中运行上述命令，然后 style.css 文件将得到更新。

运行上述命令时，style.css 文件将包含以下代码 −

style.css

h1 {
    color: #FF7F50;
}

h3 {
    color: #800080;
}

输出

现在让我们执行以下步骤来查看上述代码的工作原理 −

将上述 html 代码保存在 hello.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 嵌套规则

描述

它是一组 CSS 属性，允许将一个类的属性用于另一个类，并将类名作为其属性。在 LESS 中，您可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。它可以存储多个值，并且可以在必要时在代码中重复使用。

示例

以下示例演示了如何在 LESS 文件中使用嵌套规则 −

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

接下来，创建 style.less 文件。

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 nested_rules.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 嵌套指令和冒泡

描述

您可以像嵌套选择器一样嵌套 media 和 keyframe 等指令。您可以将指令放在顶部，其相关元素不会在其规则集内发生变化。这称为冒泡过程。

示例

以下示例演示了如何在 LESS 文件中使用嵌套指令和冒泡 −

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

接下来，创建文件 style.less。

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 nested_directives_bubbling.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 操作

描述

LESS 支持一些算术运算，例如加 (+)、减 (-)、乘 (*) 和除 (/)，它们可以对任何数字、颜色或变量进行运算。当您使用变量并且想进行简单的数学运算时，操作可以节省大量时间。

示例

以下示例演示了 LESS 文件中操作的使用 −

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

接下来，创建文件 style.less。

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.myclass {
   font-size: 20px;
   color: green;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 operations.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 转义

描述

它动态构建选择器并使用属性或变量值作为任意字符串。

示例

以下示例演示了在 LESS 文件中使用转义 −

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

现在创建 style.less 文件。

style.less

p {
   color: ~"green";
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令，它将自动创建 style.css 文件，代码如下 −

style.css

p {
    color: green;
}

在将 LESS 代码编译为 CSS 代码后，~"some_text" 中写入的任何内容都将显示为 some_text。

输出

现在让我们执行以下步骤来查看上述代码的工作原理 −

将上述 html 代码保存在 escaping.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 函数

描述

LESS 将 JavaScript 代码与值操作进行映射，并使用预定义函数来操作样式表中的 HTML 元素方面。它提供了几个函数来操作颜色，例如 round 函数、floor 函数、ceil 函数、percentage 函数等。

示例

以下示例演示了 LESS 文件中函数的使用 −

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

现在创建 style.less 文件。

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

现在执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 functions.html 文件中。
在浏览器中打开此 HTML 文件，您将收到以下输出。

LESS - 命名空间和访问器

描述

命名空间用于将 mixin 分组到一个通用名称下。使用命名空间，您可以避免名称冲突并从外部封装一组 mixin。

示例

以下示例演示了如何在 LESS 文件中使用命名空间和访问器 −

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

现在创建 style.less 文件。

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.myclass {
   font-size: 20px;
   color: green;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 namespaces_accessors.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 范围

描述

变量范围指定可用变量的位置。将从本地范围搜索变量，如果不可用，则编译器将从父范围搜索。

示例

以下示例演示了在 LESS 文件中使用命名空间和访问器 −

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

现在创建 style.less 文件。

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.myclass {
   font-size: 20px;
   color: green;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 scope.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 注释

说明

注释使代码对用户来说清晰易懂。您可以在代码中使用块样式和内联注释，但当您编译 LESS 代码时，单行注释不会出现在 CSS 文件中。

示例

以下示例演示了如何在 LESS 文件中使用注释 −

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

现在创建 style.less 文件。

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

现在执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 comments.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 导入

描述

用于导入 LESS 或 CSS 文件的内容。

示例

以下示例演示了在 LESS 文件中使用导入 −

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

现在创建 myfile.less 文件。

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

现在创建 style.less 文件。

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

The myfile.less file which will be imported into style.less from the path https://www.tutorialspoint.com/less/myfile.less

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 importing.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 变量

在本章中，我们将讨论 LESS 中的变量。LESS 允许使用 @ 符号定义变量。使用冒号 (:) 完成变量赋值。

下表详细演示了 LESS 变量的使用。

Sr.No.	变量使用 &描述
1	概述使用变量可以避免多次重复相同的值。
2	变量插值变量还可以用于其他地方，例如选择器名称、属性名称、URL和@import语句。
3	变量名称我们可以用由值组成的变量名称来定义变量。
4	延迟加载在延迟加载中，即使变量没有被使用，也可以使用它们。
5	默认变量默认变量只有在尚未设置时才能够设置变量。此功能不是必需的，因为可以通过事后定义变量来轻松覆盖变量。

LESS - Extend 扩展

Extend 是一个 LESS 伪类，它使用 :extend 选择器在一个选择器中扩展其他选择器样式。

示例

以下示例演示了在 LESS 文件中使用 extend −

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

接下来，创建 style.less 文件。

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

您可以使用以下命令将 extend.less 文件编译为 extend.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 extend_syntax.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

扩展语法

扩展被放入规则集或附加到选择器。它类似于包含一个或多个类的伪类，这些类用逗号分隔。使用可选关键字 all，可以跟上每个选择器。

示例

以下示例演示了在 LESS 文件中使用 extend 语法 −

extend_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

现在创建 style.less 文件。

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 extend_syntax.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

下表列出了您可以在 LESS 中使用的所有类型的扩展语法 −

Sr.No.	类型 &描述
1	附加到选择器的扩展扩展连接到选择器，它看起来类似于以选择器为参数的伪类。
2	扩展规则集内部 &:extend(selector) 语法可以放在规则集主体内。
3	扩展嵌套选择器使用 extend 选择器匹配嵌套选择器。
4	使用 Extend 进行精确匹配默认情况下，extend 会查找选择器之间的精确匹配。
5	第 n 个表达式第 n 个表达式的形式在 extend 中很重要，否则，它会将选择器视为不同的。
6	扩展"all" 当关键字 all 在 extend 参数中最后被标识时，LESS 会将该选择器作为另一个选择器的一部分进行匹配。
7	使用扩展进行选择器插值 extend 可以连接到插值选择器。
8	在 @media 内进行范围界定/扩展扩展仅匹配同一媒体内存在的选择器声明。
9	重复检测无法检测选择器的重复。

以下是扩展的用例类型

Sr.No.	类型和描述
1	经典用例经典用例用于避免在 LESS 中添加基类。
2	减少 CSS 大小 Extend 用于将选择器移动到您想要使用的属性;这有助于减少 css 生成的代码。
3	组合样式/更高级的混合使用扩展，我们可以将特定选择器的相同样式组合到其他选择器中。

LESS - Mixins

Mixins 类似于编程语言中的函数。Mixins 是一组 CSS 属性，允许您将一个类的属性用于另一个类，并将类名作为其属性。在 LESS 中，您可以使用类或 id 选择器以与 CSS 样式相同的方式声明 mixin。它可以存储多个值，并且可以在必要时在代码中重复使用。

下表详细演示了 LESS mixins 的使用。

Sr.No.	Mixins 用法 &描述
1	不输出 Mixin 只需在 Mixin 后面加上括号，即可使 Mixin 在输出中消失。
2	Mixin 中的选择器 Mixin 不仅可以包含属性，还可以包含选择器。
3	命名空间命名空间用于将 Mixin 分组到公共name。
4	受保护的命名空间当将 guard 应用于命名空间时，仅当 guard 条件返回 true 时才使用它定义的 mixin。
5	!important 关键字 !important 关键字用于覆盖特定属性。

示例

以下示例演示了在 LESS 文件中使用 mixins −

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

接下来，创建 style.less 文件。

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

您可以使用以下命令将 style.less 编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 less_mixins.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

调用 mixins 时，括号是可选的。在上面的示例中，两个语句 .p1(); 和 .p1; 执行相同的操作。

LESS - 参数混合

描述

参数混合使用一个或多个参数，通过获取参数及其属性来扩展 LESS 的功能，以便在混合到另一个块时自定义混合输出。

例如，考虑一个简单的 LESS 代码片段 −

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

这里我们使用参数混合作为 .border，它有三个参数 - width、style 和 color。使用这些参数，您可以使用传递的参数值自定义混合输出。

下表介绍了不同类型的参数混合及其说明。

Sr.No.	类型和描述
1	具有多个参数的 Mixin 可以使用逗号或分号分隔参数。
2	命名参数 Mixin 使用其名称提供参数值而不是位置。
3	@arguments 变量调用 mixin 时，@arguments 包括所有传递的参数。
4	高级参数和 @rest 变量 Mixin 通过使用 .... 接受可变数量的参数。
5	模式匹配通过向 mixin 传递参数来更改其行为。

LESS - Mixins 作为函数

在本章中，我们将了解Mixins 作为函数的重要性。与函数一样，mixins 可以嵌套，可以接受参数，也可以返回值。

下表详细演示了如何使用mixins作为函数。

Sr.No.	Mixins 用法和说明
1	Mixin 范围 Mixins 由变量组成;这些可以在调用者的作用域中使用并且是可见的。
2	Mixin 和返回值 Mixin 类似于函数，在 mixin 中定义的变量将充当返回值。
3	在另一个 mixin 内混合每当在另一个 mixin 内定义 mixin 时，它也可以用作返回值。

LESS - 将规则集传递给 Mixins

描述

分离规则集包含属性、嵌套规则集、变量声明、mixins 等规则集。它存储在变量中并包含在另一个结构中;规则集的所有属性都会复制到该结构中。

示例

以下示例显示如何在 LESS 文件中将规则集传递给 mixin −

passing_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

接下来，创建 style.less 文件。

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 passing_ruleset.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

范围

分离规则集中的所有变量和混合在规则集调用或定义的地方都可用。否则，默认情况下，调用者和定义范围都可用。当两个范围包含相同的混合或变量时，声明范围优先。分离规则集主体在声明范围内定义。分离规则集从一个变量复制到另一个变量后，其范围不会改变。

下表列出了所有范围类型 −

Sr.No.	类型 &描述
1	定义和调用者范围可见性变量和混合在分离规则集内定义。
2	引用不会修改分离规则集范围仅提供引用，规则集不会访问任何新范围。
3	解锁将修改分离规则集范围分离规则集可以通过导入到范围中来访问范围。

LESS - Import 导入指令

描述

@import 指令用于导入代码中的文件。它将 LESS 代码分散到不同的文件中，并允许轻松维护代码结构。您可以将 @import 语句放在代码中的任何位置。

例如，您可以使用 @import 关键字作为 @import "file_name.less" 来导入文件。

文件扩展名

您可以根据不同的文件扩展名(例如 −)使用 @import 语句。

如果您使用 .css 扩展名，则它将被视为 CSS，而 @import 语句保持不变。
如果它包含任何其他扩展名，则它将被视为 LESS 并将被导入。
如果没有 LESS 扩展名，则它将被附加并包含为导入的 LESS 文件。

@import "style"; // 导入 style.less
@import "style.less"; // 导入 style.less
@import "style.php"; // 将 style.php 作为 less 文件导入
@import "style.css"; // 它将保留原有语句

示例

以下示例演示了在 SCSS 文件中使用变量 −

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Next, create the import_dir.less file.

import_dir.less

.myline {
   font-size: 20px;
}

现在，创建 style.less 文件。

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

import_dir.less 文件将从路径 https://www.tutorialspoint.com/less/import_dir.less 导入到 style.less 文件中。

您可以使用以下命令将 style.less 编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 import_directives.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - Import 选项

在本章中，我们将了解 LESS 中导入选项的重要性。LESS 提供 @import 语句，允许样式表导入 LESS 和 CSS 样式表。

下表列出了将在导入语句中实现的导入指令。

Sr.No.	导入选项 &描述
1	reference 它仅使用 LESS 文件作为参考，不会输出它。
2	inline 它使您能够将 CSS 复制到输出中而无需处理。
3	less 它将把导入的文件视为常规 LESS 文件，无论文件扩展名是什么。
4	css 它将把导入的文件视为常规 CSS 文件，无论文件扩展名是什么。
5	once 它将只导入文件一次。
6	multiple 它将多次导入文件次。
7	optional 即使找不到要导入的文件，它也会继续编译。

在 @import 语句中允许使用多个关键字，但是必须使用逗号分隔关键字。

例如 −

@import (less, optional) "custom.css";

LESS - Mixin Guards

说明

如果您想在表达式上匹配简单值或参数数量，那么您可以使用 guards。它与 mixin 声明相关联，并包含附加到 mixin 的条件。每个 mixin 将有一个或多个用逗号分隔的 guards;guard 必须用括号括起来。LESS 使用受保护的 mixin 而不是 if/else 语句，并执行计算以指定匹配的 mixin。

下表介绍了不同类型的 mixin guards 及其说明。

Sr.No.	类型 &描述
1	Guard 比较运算符您可以使用比较运算符 (=) 来比较数字、字符串、标识符等。
2	Guard 逻辑运算符您可以使用 and 关键字来解决带保护的逻辑运算符问题。
3	类型检查函数它包含用于确定要匹配的值类型的内置函数mixins。
4	条件混合 LESS 使用 default 函数将 mixin 与其他混合匹配项进行匹配。

示例

以下示例演示了在 LESS 文件中使用 mixin 保护 −

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

现在，创建 style.less 文件。

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

您可以使用以下命令将 style.less 编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 mixin-guard.html 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - CSS Guards

描述

Guards 用于匹配表达式上的简单值或多个参数。它应用于 CSS 选择器。它是声明 mixin 并立即调用它的语法。要成功调用 if 类型语句;请将其与功能 & 结合使用，该功能允许您对多个 guards 进行分组。

示例

以下示例演示了在 LESS 文件中使用 css guard −

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

接下来，创建 style.less 文件。

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

.style {
   background-color: blue;
   color: white;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 css_guard.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 循环

在本章中，我们将了解循环在 LESS 中的工作原理。循环语句允许我们多次执行一个语句或一组语句。当递归混合与 Guard 表达式 和 模式匹配 结合时，可以创建各种迭代/循环结构。

示例

以下示例演示了如何在 LESS 文件中使用循环 −

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

接下来，创建 style.less 文件。

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 loop_example.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

LESS - 合并

说明

LESS 中的此功能允许使用单个属性将值添加到来自多个属性的逗号或空格分隔列表中。它可用于背景和转换属性。

下表介绍了合并功能支持的两种类型的函数。

Sr.No.	类型和描述
1	逗号在末尾添加属性值。
2	空格使用空格添加属性值。

LESS - 父选择器

在本章中，让我们了解父选择器的工作原理。可以使用&(和号)运算符引用父选择器。嵌套规则的父选择器由&运算符表示，并在将修改类或伪类应用于现有选择器时使用。

下表显示了父选择器的类型 −

Sr.No.	类型 &描述
1	多个 & & 将代表最近的选择器以及所有父选择器。
2	更改选择器顺序当选择器顺序发生更改时，将选择器添加到继承的(父)选择器之前很有用。
3	Combinatorial Explosion & 还可以生成以逗号分隔的列表中选择器的所有可能排列。

示例

以下示例演示了在 LESS 文件中使用父选择器 −

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

接下来，创建 style.less 文件。

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

您可以使用以下命令将 style.less 文件编译为 style.css −

lessc style.less style.css

执行上述命令;它将使用以下代码自动创建 style.css 文件 −

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

在上面的例子中，& 指的是选择器 a。

输出

按照以下步骤查看上述代码的工作原理 −

将上述 html 代码保存在 parent_selector1.htm 文件中。
在浏览器中打开此 HTML 文件，将显示以下输出。

Parent selectors 运算符有很多用途，例如，当您需要以非默认方式组合嵌套规则的选择器时。& 的另一个典型用途是重复生成类名。欲了解更多信息，请点击此处。

LESS - 杂项函数

杂项函数由一组不同类型的函数组成。

下表列出了所有类型的杂项函数 −

Sr.No.	函数 &描述
1	color 它是一个表示颜色的字符串。
2	image - size 它用于检查文件中图像的尺寸。
3	image - width 它检查文件中图像的宽度。
4	image - height 它检查文件中图像的高度。
5	convert 数字从一个单位转换为另一个单位。
6	data - uri 数据 uri 是统一资源标识符 (URI) 架构，可在网页上获取内联资源。
7	default 仅当默认函数在保护条件内可用且与任何其他函数不匹配时，它才返回 true mixin。
8	unit 默认函数仅在保护条件内可用且与任何其他 mixin 不匹配时返回 true
9	get - unit get - unit 函数返回其单位，其中参数包含数字和单位。
10	svg - gradient svg-gradient 是一种颜色到另一种颜色的过渡。它可以向同一元素添加多种颜色。

LESS - 字符串函数

说明

Less 支持下面列出的部分字符串函数 −

escape
e
% format
replace

下表介绍了上述字符串函数及其说明。

Sr.No.	类型 &描述	示例
1	转义使用 URL 编码对特殊字符进行编码，对字符串或信息进行编码。您无法对某些字符进行编码，例如 , 、/ 、? 、@ 、& 、+ 、~ 、! 、$ 、' 以及您可以编码的某些字符，例如 \ 、# 、^ 、( 、) 、{ 、> 、: 、> 、< 、] 、[ 和 =。	escape("Hello!! welcome to Tutorialspoint!") 它将转义字符串输出为 − Hello%21%21%20welcome%20to%20Tutorialspoint%21
2	e 这是一个字符串函数，使用字符串作为参数并返回不带引号的信息。这是一个 CSS 转义，使用 ~"some content" 转义值和数字作为参数。	filter: e("Hello!! welcome to Tutorialspoint!"); 它将转义字符串输出为 − filter: Hello!! welcome to Tutorialspoint!;
3	% format 此函数格式化字符串。可以采用以下格式编写 − %(string, arguments ...)	format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less"); 它将格式化的字符串输出为 − format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4	replace 它用于替换字符串中的文本。它使用一些参数 − string − 它搜索字符串并替换。 pattern − 它搜索正则表达式模式。 replacement − 它替换与模式匹配的字符串。 flags − 这些是可选的正则表达式标志。	replace("Welcome, val?", "val\?", "to Tutorialspoint!"); 它将字符串替换为 − "Welcome, to Tutorialspoint!"

Sr.No.

类型 &描述

示例

转义

使用 URL 编码对特殊字符进行编码，对字符串或信息进行编码。您无法对某些字符进行编码，例如 , 、/ 、? 、@ 、& 、+ 、~ 、! 、$ 、' 以及您可以编码的某些字符，例如 \ 、# 、^ 、( 、) 、{ 、> 、: 、> 、< 、] 、[ 和 =。

escape("Hello!! welcome to Tutorialspoint!")

它将转义字符串输出为 −

Hello%21%21%20welcome%20to%20Tutorialspoint%21

这是一个字符串函数，使用字符串作为参数并返回不带引号的信息。这是一个 CSS 转义，使用 ~"some content" 转义值和数字作为参数。

filter: e("Hello!! welcome to Tutorialspoint!");

它将转义字符串输出为 −

filter: Hello!! welcome to Tutorialspoint!;

% format

此函数格式化字符串。可以采用以下格式编写 −

%(string, arguments ...)

format-a-d: %("myvalues: %a myfile: %d", 2 + 3, 
"mydir/less_demo.less");

它将格式化的字符串输出为 −

format-a-d: "myvalues: 5 myfile: 
"mydir/less_demo.less"";

replace

它用于替换字符串中的文本。它使用一些参数 −

string − 它搜索字符串并替换。
pattern − 它搜索正则表达式模式。
replacement − 它替换与模式匹配的字符串。
flags − 这些是可选的正则表达式标志。

replace("Welcome, val?", "val\?", 
"to Tutorialspoint!");

它将字符串替换为 −

"Welcome, to Tutorialspoint!"

LESS - 列表函数

描述

LESS 由列表函数组成，用于指定列表的长度和值在列表中的位置。

下表列出了 LESS 中使用的列表函数 −

Sr.No.	函数 &描述
1	Length 它将以逗号或空格分隔的值列表作为参数。
2	Extract 它将返回列表中指定位置的值。

LESS - 数学函数

说明

数学函数包括用于执行数值运算的方法，例如四舍五入、平方根、幂值、模数、百分比等。

下表显示了 LESS − 中使用的数学函数

Sr.No.	函数和说明	示例
1	ceil 它将数字向上舍入为下一个最高整数。	ceil(0.7) 它将数字向上舍入为 − 1
2	floor 它将数字向下舍入为下一个最低整数。	floor(3.3) 它将数字向上舍入为 − 3
3	percentage 它将浮点数转换为百分比字符串。	百分比(0.2) 它将数字转换为百分比字符串，如下所示 − 20%
4	round 它对浮点数进行四舍五入。	round(3.77) 它将数字转换为四舍五入值 − 4
5	sqrt 它返回数字的平方根。	sqrt(25) 它将数字的平方根定义为 − 5
6	abs 它提供数字的绝对值。	abs(30ft) 它将绝对值显示为 − 30ft
7	sin 它返回数字的弧度。	sin(2) 它计算正弦值为 − 0.90929742682
8	asin 它指定数字的反正弦(正弦的倒数)，返回值介于 -pi/2 和 pi/2 之间。	asin(1) 它将 asin 值计算为 − 1.5707963267948966
9	cos 它返回指定值的余弦，并确定没有单位的数字的弧度。	cos(2) 它将 cos 值计算为 − -0.4161468365471424
10	acos 它指定数字的反余弦(余弦的倒数)，返回 0 到 pi 之间的值。	acos(1) 它将 acos 值计算为 − 0
11	tan 它指定数字的正切。	tan(60) 它将 tan 值计算为 − 0.320040389379563
12	atan 它指定指定数字的反正切(正切的倒数)。	atan(1) 它将 atan 值显示为 − 0.7853981633974483
13	pi 它返回 pi 值。	pi() 它将 pi 值确定为 − 3.141592653589793
14	pow 它指定第一个参数的值的第二个参数的幂。	pow(3,3) 它将幂值指定为− 27
15	mod 它返回第一个参数相对于第二个参数的模数。它还处理负数和浮点数。	mod(7,3) 它返回模数值为 − 1
16	min 它指定一个或多个参数的最小值。	min(70,30,45,20) 它返回最小值为 − 20
17	max 它指定一个或多个参数的最高值。	max(70,30,45,20) 它返回最大值为 − 70

Sr.No.

函数和说明

示例

ceil

它将数字向上舍入为下一个最高整数。

ceil(0.7)

它将数字向上舍入为 −

floor

它将数字向下舍入为下一个最低整数。

floor(3.3)

它将数字向上舍入为 −

percentage

它将浮点数转换为百分比字符串。

百分比(0.2)

它将数字转换为百分比字符串，如下所示 −

20%

round

它对浮点数进行四舍五入。

round(3.77)

它将数字转换为四舍五入值 −

sqrt

它返回数字的平方根。

sqrt(25)

它将数字的平方根定义为 −

abs

它提供数字的绝对值。

abs(30ft)

它将绝对值显示为 −

30ft

sin

它返回数字的弧度。

sin(2)

它计算正弦值为 −

0.90929742682

asin

它指定数字的反正弦(正弦的倒数)，返回值介于 -pi/2 和 pi/2 之间。

asin(1)

它将 asin 值计算为 −

1.5707963267948966

cos

它返回指定值的余弦，并确定没有单位的数字的弧度。

cos(2)

它将 cos 值计算为 −

-0.4161468365471424

acos

它指定数字的反余弦(余弦的倒数)，返回 0 到 pi 之间的值。

acos(1)

它将 acos 值计算为 −

tan

它指定数字的正切。

tan(60)

它将 tan 值计算为 −

0.320040389379563

atan

它指定指定数字的反正切(正切的倒数)。

atan(1)

它将 atan 值显示为 −

0.7853981633974483

它返回 pi 值。

pi()

它将 pi 值确定为 −

3.141592653589793

pow

它指定第一个参数的值的第二个参数的幂。

pow(3,3)

它将幂值指定为−

mod

它返回第一个参数相对于第二个参数的模数。它还处理负数和浮点数。

mod(7,3)

它返回模数值为 −

min

它指定一个或多个参数的最小值。

min(70,30,45,20)

它返回最小值为 −

max

它指定一个或多个参数的最高值。

max(70,30,45,20)

它返回最大值为 −

LESS - 类型函数

在本章中，我们将了解 LESS 中 类型函数 的重要性。它们用于确定值的类型。

下表显示了 LESS 中使用的 类型函数。


isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

Sr.No.	类型函数 &描述	示例
1	isnumber 它以一个值作为参数，如果它是一个数字，则返回 true，否则返回 false。	isnumber(1234); // true isnumber(24px); // true isnumber(7.8%); // true isnumber(#fff); // false isnumber(red); // false isnumber("variable"); // false isnumber(keyword); // false isnumber(url(...)); // false
2	isstring 它以一个值作为参数，如果它是一个字符串，则返回 true，否则返回 false。	isstring("variable"); // true isstring(1234); // false isstring(24px); // false isstring(7.8%); // false isstring(#fff); // false isstring(red); // false isstring(keyword); // false isstring(url(...)); // false
3	iscolor 它以一个值作为参数，如果值是颜色，则返回 true，如果不是，则返回 false。	iscolor(#fff); // true iscolor(red); // true iscolor(1234); // false iscolor(24px); // false iscolor(7.8%); // false iscolor("variable"); // false iscolor(keyword); // false iscolor(url(...)); // false
4	iskeyword 它以一个值作为参数，如果值是关键字，则返回 true，如果不是关键字，则返回 false。	iskeyword(keyword); // true iskeyword(1234); // false iskeyword(24px); // false iskeyword(7.8%); // false iskeyword(#fff); // false iskeyword(red) ; // false iskeyword("variable");// false iskeyword(url(...)); // false
5	isurl 它以一个值作为参数，如果值是 url，则返回 true，如果不是，则返回 false。	isurl(url(...)); // true isurl(keyword); // false isurl(1234); // false isurl(24px); // false isurl(7.8%); // false isurl(#fff); // false isurl(red) ; // false isurl("variable"); // false
6	ispixel 它以一个值作为参数，如果值是像素数，则返回 true，否则返回 false。	ispixel(24px); // true ispixel(1234); // false ispixel(7.8%); // false ispixel(keyword); // false ispixel(#fff); // false ispixel(red) ; // false ispixel("variable"); // false ispixel(url(...)); // false
7	isem 它以一个值作为参数，如果值是 em 值则返回 true，如果不是则返回 false。	isem(0.5em); // true isem(1234); // false isem(24px); // false isem(keyword); // false isem(#fff); // false isem(red) ; // false isem("variable"); // false isem(url(...)); // false
8	ispercentage 它以一个值作为参数，如果值是百分比，则返回 true，如果值不是百分比，则返回 false。	ispercentage(7.5%); // true ispercentage(url(...)); // false ispercentage(keyword); // false ispercentage(1234); // false ispercentage(24px); // false ispercentage(#fff); // false ispercentage(red) ; // false ispercentage("variable"); // false
9	isunit 如果参数中的值是采用指定单位的数字，则返回 true;如果值不是采用指定单位的数字，则返回 false。	isunit(10px, px); // true isunit(5rem, rem); // true isunit(7.8%, '%'); // true isunit(2.2%, px); // false isunit(24px, rem); // false isunit(48px, "%"); // false isunit(1234, em); // false isunit(#fff, pt); // false isunit("mm", mm); // false
10	isruleset 它以一个值作为参数，如果值是一个规则集则返回 true，否则返回 false。	@rules: { color: green; } isruleset(@rules); // true isruleset(1234); // false isruleset(24px); // false isruleset(7.8%); // false isruleset(#fff); // false isruleset(blue); // false isruleset("variable"); // false isruleset(keyword); // false isruleset(url(...)); // false

LESS - 颜色定义函数

描述

LESS 提供了许多有用的颜色函数，以不同的方式改变和操纵颜色。LESS 支持一些颜色定义函数，如下表所示 −

Sr.No.	函数和描述	示例
1	rgb 它从红色、绿色和蓝色值创建颜色。它具有以下参数 − red −它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。 green − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。 blue − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。	rgb(220,20,60) 它将 rgb 值的颜色转换为 − #dc143c
2	rgba 它根据红色、绿色、蓝色和 alpha 值确定颜色。它具有以下参数 − red − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。 green − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。 blue − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。 alpha −它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。	rgba(220,20,60, 0.5) 它将具有 rgba 值的颜色对象转换为 − rgba(220, 20, 60, 0.5)
3	argb 它以 #AARRGGBB 格式定义颜色的十六进制表示。它使用以下参数 − color − 它指定颜色对象。	argb(rgba(176,23,31,0.5)) 它将 argb 颜色返回为 − #80b0171f
4	hsl 它根据色调、饱和度和亮度值生成颜色。它具有以下参数 − hue(色调) − 它包含 0 - 360 之间的整数，代表度数。 saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。 lightness(亮度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。	hsl(120,100%, 50%) 它使用 HSL 值返回颜色对象 − #00ff00
5	hsla 它根据色调、饱和度、亮度和 alpha 值生成颜色。它具有以下参数 − hue(色调) − 它包含 0 - 360 之间的整数，代表度数。 saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。 lightness(亮度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。 alpha −它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。	hsla(0,100%,50%,0.5) 它使用 HSLA 值作为 − 指定颜色对象 rgba(255, 0, 0, 0.5);
6	hsv 它根据色调、饱和度和值生成颜色。它包含以下参数 − hue(色调) −它包含 0 - 360 之间的整数，代表度数。 saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。 value(值) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。	hsv(80,90%,70%) 它将颜色对象与 hsv 值转换为 − #7db312
7	hsva 它从色调、饱和度、值和 alpha 值产生颜色。它使用以下参数 − hue(色调) − 它包含 0 - 360 之间的整数，代表度数。 saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。 value(值) −它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。 alpha − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。	hsva(80,90%,70%,0.6) 它指定颜色对象，其中 hsva 值如下 − rgba(125, 179, 18, 0.6)

Sr.No.

函数和描述

示例

rgb

它从红色、绿色和蓝色值创建颜色。它具有以下参数 −

red −它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。
green − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。
blue − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。

rgb(220,20,60)

它将 rgb 值的颜色转换为 −

#dc143c

rgba

它根据红色、绿色、蓝色和 alpha 值确定颜色。它具有以下参数 −

red − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。
green − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。
blue − 它包含 0 - 255 之间的整数或 0 - 100% 之间的百分比。
alpha −它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

rgba(220,20,60, 0.5)

它将具有 rgba 值的颜色对象转换为 −

rgba(220, 20, 60, 0.5)

argb

它以 #AARRGGBB 格式定义颜色的十六进制表示。它使用以下参数 −

color − 它指定颜色对象。

argb(rgba(176,23,31,0.5))

它将 argb 颜色返回为 −

#80b0171f

hsl

它根据色调、饱和度和亮度值生成颜色。它具有以下参数 −

hue(色调) − 它包含 0 - 360 之间的整数，代表度数。
saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。
lightness(亮度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

hsl(120,100%, 50%)

它使用 HSL 值返回颜色对象 −

#00ff00

hsla

它根据色调、饱和度、亮度和 alpha 值生成颜色。它具有以下参数 −

hue(色调) − 它包含 0 - 360 之间的整数，代表度数。
saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。
lightness(亮度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。
alpha −它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

hsla(0,100%,50%,0.5)

它使用 HSLA 值作为 − 指定颜色对象

rgba(255, 0, 0, 0.5);

hsv

它根据色调、饱和度和值生成颜色。它包含以下参数 −

hue(色调) −它包含 0 - 360 之间的整数，代表度数。
saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。
value(值) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

hsv(80,90%,70%)

它将颜色对象与 hsv 值转换为 −

#7db312

hsva

它从色调、饱和度、值和 alpha 值产生颜色。它使用以下参数 −

hue(色调) − 它包含 0 - 360 之间的整数，代表度数。
saturation(饱和度) − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。
value(值) −它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。
alpha − 它包含 0 - 1 之间的数字或 0 - 100% 之间的百分比。

hsva(80,90%,70%,0.6)

它指定颜色对象，其中 hsva 值如下 −

rgba(125, 179, 18, 0.6)

LESS - 颜色通道函数

在本章中，我们将了解 LESS 中颜色通道函数的重要性。LESS 支持一些内置函数来设置通道的值。通道根据颜色定义设置值。HSL 颜色有色调、饱和度和亮度通道，RGB 颜色有红色、绿色和蓝色通道。下表列出了所有颜色通道函数 −


background: hue(hsl(75, 90%, 30%));
background: saturation(hsl(75, 90%, 30%));
background: lightness(hsl(75, 90%, 30%));
background: hsvhue(hsv(75, 90%, 30%));
background: hsvsaturation(hsv(75, 90%, 30%));
background: hsvvalue(hsv(75, 90%, 30%));
background: red(rgb(5, 15, 25));
background: green(rgb(5, 15, 25));
background: blue(rgb(5, 15, 25));
background: alpha(rgba(5, 15, 25, 1.5));
background: luma(rgb(50, 250, 150));
background: luminance(rgb(50, 250, 150));

Sr.No.	函数 &描述	示例
1	色调在 HSL 颜色空间中，色调通道是从颜色对象中提取出来的。	background: hue(hsl(75, 90%, 30%)); 它在 CSS 中编译如下 − background: 75;
2	saturation 在 HSL 颜色空间中，饱和度通道是从颜色对象中提取出来的。	background: saturation(hsl(75, 90%, 30%)); 它在 CSS 中编译如下 − background: 90%;
3	lightness 在 HSL 颜色空间中，亮度通道是从颜色对象中提取的。	background: lightness(hsl(75, 90%, 30%)); 它在 CSS 中编译如下 − background: 30%;
4	hsvhue 在 HSV 颜色空间中，色调通道是从颜色对象中提取出来的。	background: hsvhue(hsv(75, 90%, 30%)); 它在 CSS 中编译如下 − background: 75;
5	hsvsaturation 在 HSL 颜色空间中，饱和度通道是从颜色对象中提取出来的。	background: hsvsaturation(hsv(75, 90%, 30%)); 它在 CSS 中编译如下 − background: 90%;
6	hsvvalue 在 HSL 颜色空间中，值通道是从颜色对象中提取的。	background: hsvvalue(hsv(75, 90%, 30%)); 它在 CSS 中编译如下 − background: 30%;
7	red 红色通道是从颜色对象中提取出来的。	background: red(rgb(5, 15, 25)); 它在 CSS 中编译如下 − background: 5;
8	green 绿色通道是从颜色对象中提取出来的。	background: green(rgb(5, 15, 25)); 它在 CSS 中编译如下 − background: 15;
9	blue 蓝色通道是从颜色对象中提取出来的。	background: blue(rgb(5, 15, 25)); 它在 CSS 中编译如下 − background: 25;
10	alpha 从颜色对象中提取 alpha 通道。	background: alpha(rgba(5, 15, 25, 1.5)); 它在 CSS 中编译如下 − background: 2;
11	luma 亮度值是根据颜色对象计算的。	background: luma(rgb(50, 250, 150)); 它在 CSS 中编译如下 − background: 71.2513323%;
12	luminance 亮度值的计算不包含伽马校正。	background: luminance(rgb(50, 250, 150)); 它在 CSS 中编译如下 − background: 78.53333333%;

LESS - 颜色操作

描述

LESS 提供了许多有用的操作函数，用于以不同的方式改变和操作颜色，并以相同的单位获取参数。LESS 支持一些颜色操作函数，如下表所示 −

Sr.No.	指令 &描述
1	saturate 它改变元素中颜色的强度或饱和度。
2	desaturate 它降低元素中颜色的强度或饱和度。
3	lighten 它增加元素中颜色的亮度。
4	darken 改变元素中颜色的强度或饱和度。
5	fadein 增加所选元素的不透明度。
6	fadeout 降低所选元素的不透明度。
7	fade 用于设置所选颜色的透明度元素。
8	spin 用于旋转所选元素的颜色角度。
9	mix 它将两种颜色与不透明度混合。
10	tint 当您降低颜色比例时，它会将颜色与白色混合。
11	shade 当您减少颜色的比例时，它会将颜色与黑色混合。
12	greyscale 它会丢弃所选元素中颜色的饱和度。
13	contrast 它设置元素中颜色的对比度。

LESS - 颜色混合函数

在本章中，我们将了解 LESS 中的颜色混合函数。这些操作与 Photoshop、Fireworks 或 GIMP 等图像编辑器中使用的操作类似，可将 CSS 颜色与图像匹配。

下表显示了 LESS 中使用的颜色混合函数。

Sr.No.	函数和描述
1	multiply 它将两种颜色相乘并返回结果颜色。
2	screen 它采用两种颜色并返回更亮的颜色。它与 multiply 函数的工作原理相反。
3	overlay 它通过结合 multiply 和 screen 的效果来生成结果。
4	softlight 它的工作原理类似于叠加，但它只使用颜色的一部分，从而柔和地突出显示其他颜色。
5	hardlight 其工作原理类似于叠加，但颜色的作用相反。
6	difference 它从第一个输入颜色中减去第二个输入颜色。
7	exclusion 其工作原理类似于差异功能，但对比度较低。
8	average 它基于每个通道 (RGB) 计算两个输入颜色的平均值。
9	negation 它与差值函数相反，后者从第二个颜色中减去第一个颜色。

LESS - 命令行用法

使用命令行，我们可以将 .less 文件编译为 .css。

安装 lessc 以供全局使用

以下命令用于使用 npm(节点包管理器)安装 lessc，以使 lessc 全局可用。

npm install less -g

您还可以在包名称后添加特定版本。例如 npm install less@1.6.2 -g

安装 Node 开发

以下命令用于在项目文件夹中安装最新版本的 lessc。

npm i less -save-dev

它还会添加到项目 package.json 中的 devDependencies 中。

lessc 的 Beta 版本

当 lessc 结构发布到 npm 时，它会被标记为 beta。在这里，新功能会定期开发。 less -v 用于获取当前版本。

安装 lessc 的未发布开发版本

当我们继续安装 lessc 的未发布版本时，需要指定提交 - ish，并且需要遵循指示将 git URL 标识为依赖项。这将确保您在项目中使用正确版本的 leesc。

服务器端和命令行使用

bin/lessc 在存储库中包含二进制文件。它适用于 Windows、OS X 和 *nix 上的 nodejs。

命令行用法

当源设置为破折号或连字符 (-) 时，输入从 stdin 读取。

lessc [option option = parameter ...]  [destination]

例如，我们可以使用以下命令将 .less 编译为 .css −

lessc stylesheet.less stylesheet.css

我们可以使用以下命令将 .less 编译为 .css 并使用最小化结果。

lessc -x stylesheet.less stylesheet.css

选项

下表列出了命令行使用中使用的选项 −


lessc -help
lessc -h
lessc --include-path = PATH1;PATH2
lessc -M
lessc --depends
lessc --no-color
lessc --no-ie-compat
lessc --no-js
lessc --lint
lessc -l
lessc --silent
lessc -s
lessc --strict-imports
lessc --insecure
lessc -version
lessc -v
lessc -x
lessc --compress
lessc --source-map
lessc -source-map = file.map
lessc --source-map-rootpath = dev-files/
lessc --source-map-basepath = less-files/
lessc --source-map-less-inline
lessc --source-map-map-inline
lessc --source-map-url = ../my-map.json
lessc -rp=resources/
lessc --rootpath=resources/
lessc -ru
lessc --relative-urls
lessc -sm = on
lessc --strict-math = on
lessc -su = on
lessc --strict-units = on
lessc --global-var = "background = green"
lessc --modify-var = "background = green"
lessc --url-args = "arg736357"
lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
lessc --clean-css
lessc --plugin = clean-css = "advanced"

Sr.No.	选项和说明	命令
1	Help 显示帮助消息和可用选项。	lessc -help lessc -h
2	Include Paths 包含库的可用路径，这些路径可以在 Less 文件中简单相对地引用，windows 中的路径以冒号(:)或分号(;)分隔。	lessc --include-path = PATH1;PATH2
3	Makefile 它生成一个 makefile 导入依赖项列表到 stdout 作为输出。	lessc -M lessc --depends
4	No Color 它禁用彩色输出。	lessc --no-color
5	No IE Compatibility 它禁用 IE 兼容性检查。	lessc --no-ie-compat
6	Disable Javascript 它禁用 less 文件中的 javascript。	lessc --no-js
7	Lint 它检查语法并报告错误，但不输出任何内容。	lessc --lint lessc -l
8	Silent 强制停止显示错误信息。	lessc --silent lessc -s
9	Strict Imports 它强制评估导入。	lessc --strict-imports
10	Allow Imports from Insecure HTTPS Hosts 它从不安全的 HTTPS 主机导入。	lessc --insecure
11	Version 显示版本号并退出。	lessc -version lessc -v
12	Compress 它有助于删除空格并压缩输出。	lessc -x lessc --compress
13	Source Map Output Filename 它在 less 中生成源映射。如果源映射选项定义时没有文件名，则它将使用扩展映射和 Less 文件名作为源。	lessc --source-map lessc -source-map = file.map
14	Source Map Rootpath Rootpath 已指定，应添加到源映射内的 Less 文件路径以及输出 css 中指定的映射文件中。	lessc --source-map-rootpath = dev-files/
15	Source Map Basepath 指定了必须从输出路径中删除的路径。Basepath 与 rootpath 选项相反。	lessc --source-map-basepath = less-files/
16	Source Map Less Inline 所有 Less 文件都应包含在 sourcemap 中。	lessc --source-map-less-inline
17	Source Map Map Inline 它指定在输出 css 中地图文件应该是内联的。	lessc --source-map-map-inline
18	Source Map URL css 中允许用 URL 覆盖地图文件中的点。	lessc --source-map-url = ../my-map.json
19	Rootpath 设置相对导入和 URL 中 URL 重写的路径。	lessc -rp=resources/ lessc --rootpath=resources/
20	Relative URLs 在导入的文件中，URL 会被重写，以便 URL 始终相对于基础文件。	lessc -ru lessc --relative-urls
21	Strict Math 它会处理 css 中的所有数学函数。默认情况下，它是关闭的。	lessc -sm = on lessc --strict-math = on
22	Strict Units 它允许混合单位。	lessc -su = on lessc --strict-units = on
23	Global Variable 定义了一个可以被文件引用的变量。	lessc --global-var = "background = green"
24	Modify Variable 这与全局变量选项不同;它将声明移动到 less 文件的末尾。	lessc --modify-var = "background = green"
25	URL Arguments 要转到每个 URL，可以指定一个参数。	lessc --url-args = "arg736357"
26	Line Numbers 生成内联源映射。	lessc --line-numbers = comments lessc --line-numbers = mediaquery lessc --line-numbers = all
27	Plugin 它加载插件。	lessc --clean-css lessc --plugin = clean-css = "advanced"

LESS - 在浏览器中使用 Less

当您想在需要时动态编译 Less 文件而不是在服务器端时，Less 可在浏览器中使用;这是因为 less 是一个很大的 javascript 文件。

首先，我们需要添加 LESS 脚本以在浏览器中使用 LESS −

<script src = "less.js"></script>

要在页面上找到样式标签，我们需要在页面上添加以下行。它还会使用编译后的 css 创建样式标签。

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

设置选项

在脚本标记之前，可以通过编程方式在 less 对象上设置选项。它将影响 less 和初始链接标记的所有编程使用。

例如，我们可以按如下方式设置选项 −

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js"></script>

我们还可以在脚本标签上以另一种格式设置选项，如下所示 −

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

您还可以将这些选项添加到链接标签中。

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

属性选项需要考虑的点有−

window.less < script tag < link tag是重要性级别。
data属性不能使用驼峰命名法;link标签选项以时间选项表示。
非字符串值的数据属性应为JSON有效。

监视模式

可以通过将env选项设置为development并在添加less.js文件后调用less.watch()来启用监视模式。如果希望临时启用监视模式，则在URL中添加#!watch。

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

修改变量

启用 LESS 变量的运行时修改。调用新值时重新编译 LESS 文件。以下代码显示了修改变量的基本用法 −

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

调试

我们可以将选项 !dumpLineNumbers:mediaquery 添加到 url 或 dumpLineNumbers 选项，如上所述。mediaquery 选项可以与 FireLESS 一起使用(它显示原始 LESS 文件名和 LESS 生成的 CSS 样式的行号。)

选项

在加载脚本文件 less.js 之前，必须在全局 less 对象中设置选项。

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>

async − 它是一个布尔类型。无论是否使用选项 async，都会请求导入的文件。默认情况下，它是 false。
dumpLineNumbers − 它是一个字符串类型。在输出的 css 文件中，设置 dumpLineNumbers 时会添加源行信息。它有助于调试特定规则的来源。
env − 它是一个字符串类型。env 可以在开发或生产上运行。当文档 URL 以 file:// 开头或存在于本地计算机中时，会自动设置开发。
errorReporting − 当编译失败时，可以设置错误报告方法。
fileAsync − 它是一个布尔类型。当页面带有文件协议时，它可以请求是否异步导入。
functions − 它是对象类型。
logLevel − 它是一个数字类型。它在 javascript 控制台中显示日志记录级别。
- 2 : 信息和错误
- 1 : 错误
- 0 : 无
poll − 在监视模式下，轮询之间的时间以毫秒为单位显示。它是一个整数类型;默认情况下，它设置为 1000。
relativeUrls − URL 调整为相对;默认情况下，此选项设置为 false。这意味着 URL 已经相对于条目 less 文件。它是布尔类型。
globalVars − 将全局变量列表插入代码中。字符串类型变量应包含在引号中
modifyVars − 它与全局变量选项不同。它将声明移到 less 文件的末尾。
rootpath − 它在每个 URL 资源的开头设置路径。
useFileCache − 使用每个会话文件缓存。less 文件中的缓存用于调用modifyVars，其中所有less文件都不会再次检索。

LESS - 浏览器支持

LESS 跨浏览器友好。它支持现代浏览器，如 Google Chrome、Mozilla Firefox、Safari 和 Internet Explorer，并允许重用 CSS 元素并使用相同的语义编写 LESS 代码。在客户端使用 LESS 和显示 JavaScript 时，您必须注意性能影响，以避免出现任何外观问题，例如

拼写错误，
颜色变化，
纹理
外观
链接等

在服务器端编译 LESS 文件以提高网站的性能水平。

PhantomJS 未实现 Function.prototype.bind 函数，因此您需要使用 es5 shim JavaScript 引擎在 PhantomJS 下运行。用户可以使用变量进行调整以影响主题，并在生产中使用客户端 LESS 实时显示它们。

如果您想在旧版浏览器中运行 LESS，请使用 es-5 shim JavaScript 引擎，该引擎添加了 LESS 支持的 JavaScript 功能。您可以使用浏览器必须支持的 JSON.parse 在脚本或链接标签上使用属性。

LESS - 插件

在本章中，我们将了解如何上传插件以扩展网站的功能。插件可用于使您的工作更轻松。

命令行

要使用命令行安装插件，您首先需要安装 lessc 插件。可以在开始时使用 less-plugin 安装该插件。以下命令行将帮助您安装 clean-css 插件 −

npm install less-plugin-clean-css

您可以直接使用以下命令使用已安装的插件 −

lessc --plugin = path_to_plugin = options

在代码中使用插件

在 Node 中，插件是必需的，它将作为选项插件的数组传递给 less。

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

在浏览器中

在 less.js 脚本之前，插件作者应该在页面中包含 javascript 文件。

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Less 插件列表

下表列出了 LESS 中可用的插件。

后处理器/功能插件

Sr.No.	插件和描述
1	Autoprefixer 用于在从 LESS 翻译后为 CSS 添加前缀。
2	CSScomb 有助于改善样式表的维护。
3	clean-css 它会缩小 LESS 的 CSS 输出。
4	CSSWring 它会压缩或缩小 LESS 的 CSS 输出。
5	css-flip 它用于从左到右 (LTR) 或从右到左(RTL)。
6	functions 它将LESS的函数写在LESS本身中。
7	glob 用于导入多个文件。
8	group-css-media-queries 它对 Less 进行后期处理。
9	inline-urls 自动将 URL 转换为数据 uri。
10	npm-import 它从 npm 导入打包 less。
11	pleeease 用于对 Less 进行后处理。
12	rtl LESS 从 ltr(从左到右)反转为 rtl(从右到左)。

框架/库导入器

Sr.No.	导入器和描述
1	Bootstrap 在自定义 LESS 代码之前导入 Bootstrap LESS 代码。
2	Bower Resolve 从 Bower 包导入 LESS 文件。
3	less.js 的 Cardinal CSS 在自定义 LESS 代码之前，导入了 Cardinal 的 LESS 代码。
4	Flexbox Grid 最常导入的框架或库导入器。
5	Flexible Grid System 它导入了 Flexible Grid系统。
6	Ionic 它导入了 ionic 框架。
7	Lesshat 它导入了 Lesshat mixins。
8	Skeleton 它导入无骨架代码。

函数库

Sr.No.	导入器和描述
1	advanced-color-functions 用于查找更多对比色。
2	cubehelix 使用伽马校正值 1，cubehelix 函数可以返回两种颜色之间的一种颜色。
3	lists 此列表操作函数库。

对于插件作者

LESS 允许作者与 less 结合使用。

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}

pluginManager 提供了一个可以添加文件管理器、后处理器或访问者的容器。
setOptions 函数传递字符串。
printUsage 函数用于解释选项。

LESS - 编程使用

LESS 中编程使用的主要点是 less.render 函数。此函数在 LESS 中使用以下格式 −

less.render(input_data, options)
.then(function(output) {
    //code here
},

function(error) {
});

该函数也可以按以下方式编写 −

less.render(css, options, function(error, output) {})

options 是一个可选参数，当您未指定回调时，它将返回 promise;当您指定回调时，它将返回 promise。您可以通过将文件读入字符串来显示文件，并设置主文件的文件名字段。

sourceMap 选项允许设置源映射选项，例如 sourceMapURL、sourceMapBasepath、sourceMapRootpath、outputSourceFiles 和 sourceMapFileInline。这里需要考虑的一点是 sourceMap 选项不适用于 less.js。

您可以通过添加监听器来访问日志，如下所示 −

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

上述定义的函数是可选的。如果显示错误，则会将错误传递给 less.render 中的 callback 或 promise。

LESS - 在线编译器

在本章中，我们将了解 LESS 中在线编译器的重要性。在线编译器用于将 less 代码编译为 css 代码。在线编译器工具可轻松帮助生成 css 代码。以下是可用的在线 less 编译器 −

支持较少的在线 Web IDE/Playgrounds

以下是支持较少的可用在线 Web IDE。

Sr.No.	在线 Web IDE 和描述
1	CSSDeck Labs 在这里您可以轻松创建涉及 HTML、CSS、JS 代码的测试用例。
2	CodePen 这是前端 Web 的游乐场。
3	Fiddle Salad 在这里您可以添加现有代码环境。
4	JS Bin 这有助于 Javascript 和 CSS 代码。
5	jsFiddle 这是一个在线网页编辑器。

LESS - GUI

在本章中，我们将了解 LESS 的 GUI。您可以为您的平台使用不同的 LESS 工具。有关 命令行 用法和工具，请单击此链接。

下表列出了支持跨平台的 GUI 编译器。

Sr.No.	工具和描述
1	Crunch 2! 它支持Windows、Mac和Linux等平台。它为编辑器提供了集成编译功能。
2	Mixture 它是一种快速原型设计和静态站点生成工具，供设计师和开发人员使用。它快速、高效，并且与您的编辑器配合良好。它汇集了一系列出色的工具和最佳实践。
3	SimpLESS 它是一个极简的 LESS 编译器。它提供拖放和编译功能。SimpLESS 支持使用 prefixr 为您的 CSS 添加前缀，这是 SimpLESS 的独特功能。它建立在 Titanium 平台上。
4	Koala 它用于编译 LESS、SASS 和 CoffeeScript。它提供编译错误通知支持和编译选项支持等功能。

下表列出了支持 Windows 平台的 GUI 编译器。

Sr.No.	工具和描述
1	Prepros 它是一个编译 LESS、SASS、Compass、Stylus、Jade 等的工具。
2	WinLess 最初它是 LESS.app 的克隆，它有几种设置并采用了功能更完整的方法。它支持使用命令行参数启动。

下表列出了支持 OS X 平台的 GUI 编译器。

Sr.No.	工具和说明
1	CodeKit t 是 LESS.app 的后继者，支持 LESS 以及许多其他处理语言，如 SASS、Jade、Markdown 等。
2	LiveReload 它可以即时编辑 CSS 并更改图像。SASS、LESS、CoffeeScript 和其他语言都运行良好。

下表列出了支持 OS X 平台的 GUI 编译器。

Sr.No.	工具和说明
1	Plessc 它是 lessc 的 GUI 前端。它具有日志查看器、自动编译、使用所选编辑器打开 LESS 文件和源映射支持等功能。

LESS - 编辑器和插件

在本章中，我们将了解编辑器和插件在 LESS 中的重要性。编辑器是允许用户编辑文本的系统或程序。插件是用于扩展网站功能的软件。

现在让我们讨论 LESS 的编辑器和 IDE。

Sr.No.	编辑器和 IDE &描述
1	Crunch! 它支持跨平台，如 Windows、Mac 和 Linux。它提供了集成编译的编辑器。
2	Mindscape Web Workbench 它提供 CoffeeScript、SASS、Compass 和 LESS 编辑功能，使在 Visual Studio 中进行现代 Web 开发变得简单。
3	NetBeans 它是一个基于 Java 的开源 IDE。这有助于快速开发桌面、移动和 Web 应用程序以及涉及 HTML、JavaScript 和 CSS 的 HTML5 应用程序。
4	TextMate 它是 Mac OS X 的通用图形文本编辑器。它具有声明性自定义、可录制宏、代码片段、shell 集成、打开文档选项卡和可扩展的捆绑系统。
5	Vim vim 捆绑包添加了缩进、突出显示等功能动态样式表语言 LESS 的自动完成功能。
6	Emacs 它包含 less-css-model，为 LESS CSS (lesscss.org) 提供 Emacs 模式;Emacs 支持保存时编译。
7	jetBrains WebStorm 和 PhpStorm WebStrom 是一款轻量级且功能强大的 IDE。它非常适合使用 Node.js 进行复杂的客户端和服务器开发。 PhpStorm 是一个 PHP IDE，支持深度代码理解，为所有主要工具和框架提供一流的编码帮助和支持。
8	Brackets 它是一个轻量级、功能强大且开源代码编辑器，可帮助网页设计师和前端开发人员。
9	CodeLobster 它是一个主要用于 PHP 的便携式集成开发环境 (IDE)。它还支持 HTML、CSS 和 JavaScript 开发，并且为 Drupal、WordPress、Smarty、Joomla、JQuery、Facebook、Codeigniter、Yii 和 CakePHP 提供插件。
10	KineticWing IDE 它是一款快速、干净、轻量且便携的 IDE。它是一个全尺寸开发套件，可帮助您快速、智能地工作。
11	nodeMirror 它是一个开源且易于定制的 IDE。它利用了 CodeMirror.net、pty.js 和其他库。
12	HTML-Kit 工具这是一个适用于 HTML5、CSS3、JavaScript 等的现代 Web 编辑器。有了它，您可以从符合现代标准的编辑器中编辑、预览、验证、发布和管理项目。

Sublime Text 2 & 3

sublime text 为 LESS 提供了不同的选项，如下表所示 −

Sr.No.	选项 &描述
1	Less-sublime Sublime Text 的 LESS 语法为 .less 文件提供语法高亮显示，以及代码片段。
2	Sublime-Less-to-CSS Sublime text 2 和 3 插件用于在保存时将 .less 文件编译为 CSS。它需要在 PATH 上安装 lessc。
3	Less-build-sublime 用于 sublime text 2 的 LESS 构建系统，它为 LESS 文件提供了两个构建系统，包括最小化和未最小化的。
4	SublimeOnSaveBuild 它是 sublime text 2 的一个简单的插件，用于在您单击"保存"时触发构建。与 LESS、Compass 等预处理器配合良好。

Eclipse

Eclipse 有两个用于 LESS 的插件，如下表所列 −

Sr.No.	插件 &描述
1	Eclipse Less 插件通过扩展 Eclipse IDE，此插件提供了有用的功能来编辑和编译 LESS 样式表。
2	Transpiler 插件此 Eclipse 插件会自动转译您的文件，如 LESS、SASS、CoffeeScript 等。

Visual Studio

Visual Studio 有以下不同的 LESS 选项 −

Sr.No.	选项 &描述
1	CSS Is Less 此扩展使用 CSS 语言服务打开 LESS 文件。
2	Web Essentials 2012 此扩展允许您执行常见的任务变得更加容易，并为 Web 开发人员向 Visual Studio 添加了有用的功能。
3	Web Essentials 2013 它扩展了 Visual Studio，提供了很多新功能，这些功能并不特定于特定语言或编辑器。
4	Web Tools 2013 这可以帮助您完成涉及 ASP.NET 的开发任务

Dreamweaver

以下使用 Dreamweaver 时需要考虑的要点。

它是网页设计师和开发人员用来创建应用程序和网站的 Adobe 应用程序。
它能够跨多个平台工作，包括浏览器、设备和平板电脑。
网页设计师使用 Dreamweaver 创建网站原型。
DMXzone Less CSS Compiler 将所有 LESS CSS 功能直接集成到Dreamweaver。

Notepad++ 6.x

使用 Notepad++ 时需要考虑以下几点。

Notepad++ 是一个免费的文本编辑器和源代码编辑器，支持选项卡式编辑，即在单个窗口中处理多个打开的文件。
Notepad++ 的 LESS 是一个 xml 文件，可为 .less 文件提供语法突出显示或着色。要获取更多信息，请单击此链接。
要安装 Notepad++，请单击此链接。

LESS - 第三方编译器

Node.js 编译器

以下是用于 LESS 的 Node.js 编译器。

其他技术

以下是一些其他可帮助您编译 LESS 代码的技术。

Wro4j Runner CLI

您可以下载 wro4j-runner.jar 并使用以下命令在 CSS 中编译您的 LESS 代码 −

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

您可以访问以下链接了解有关 Wro4j Runner CLI

CSS::LESSp

此模块用于解析并将 LESS 文件编译为 CSS 文件。以下是用于编译的命令 −

lessp.pl styles.less > styles.css

您可以访问以下链接了解有关 CSS::LESSp 的更多信息

Windows Script Host

以下是在 Windows 上运行的命令行编译器。

cscript //nologo lessc.wsf input.less [output.css] [-compress]

或

lessc input.less [output.css] [-compress]

您可以访问以下链接了解有关适用于 Windows 的 Less.js

dotless

以下是用于在 Windows 上运行 dotless 的命令行编译器。

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

您可以访问以下链接了解有关 dotless 的更多信息

LESS - 框架

UI/主题框架和组件

LESS 支持下表列出的部分 UI/主题框架 −

Sr.No.	框架 &描述
1	1pxdeep 它是扁平的 Bootstrap 3 主题，提供强大的配色方案控制。
2	Bootflat 它是一个基于 Bootstrap 的开源框架。
3	BootPress 它是一个基于平面文件 CMS 的 PHP 框架
4	Bootstrap 它是一个强大的移动优先前端框架，可实现更快、更轻松的 Web 开发。
5	Bootstrap a11y theme 它为 Web 开发提供了便捷的可访问性。
6	Bootswatch 这是一个开源主题，为 Bootstrap 提供免费主题。
7	Cardinal 这是一个移动优先的 CSS 框架，允许维护响应式网站、用户界面和应用程序的 CSS。
8	CSSHorus 它是一个提供轻松开发移动网站的库。
9	Flat UI Free 它基于 Bootstrap 3，包含基本和复杂组件，并为 Bootstrap 提供主题设计。
10	frontsize 它是一个前端框架，包含一组用于构建小部件的工具。
11	InContent 使用 CSS3 和 SASS/LESS 指定图像的描述。
12	Ink 它创建响应式 Web 界面。
13	JBST 它是用于创建 WordPress 子主题并用作独立网站构建器的强大主题框架。
14	KNACSS 它用于使用响应式和可扩展样式表开发 HTML/CSS 项目。
15	Kube 它是专业设计师和开发人员使用的 CSS 框架。
16	Metro UI CSS 它是一个用于在项目上创建 Windows Metro 风格的前端框架。
17	Pre 它是使用LESS。
18	prelude 它是使用 LESS 的前端 CSS 框架。
19	Schema 它是一个轻量级且响应迅速的框架，有助于构建复杂的网站。
20	Semantic UI 它是一个使用 HTML 创建响应式布局的用户界面框架。
21	UIkit 它是一个包含 HTML、CSS 和 JS 组件的前端框架，易于使用和开发 Web 应用程序。
22	ngBoilerplate 它是用于 AngularJS 项目的基于 grunt 的构建系统。
23	less-rail 它是一种动态样式表语言，使用 Less.js 进行 Rails 项目。
24	Wee 它是一个前端框架，包含用于开发响应式 Web 项目的 HTML、CSS 和 JavaScript 引导组件。

网格系统

LESS 支持下表所列的网格系统框架 −

Sr.No.	框架 &描述
1	灵活网格系统这是一个以灵活方式创建 Web 项目的 CSS 框架。
2	adaptGrid 这是一个用于开发 Web 应用程序的响应式网格系统。
3	Fluidable 基于 LESS 预处理器的轻量级响应式网格系统。
4	Golden Grid System 用于响应式设计的网格系统。
5	LESS Zen Grid 用于解决子像素舍入问题。
6	Order.less 这是一个用于对齐、网格系统和模块化比例的 LESS 库。
7	负责任这是一个可定制的独立网格系统。
8	响应式样板它是一个轻量级的网格系统，用于为网站创建响应式网页设计。
9	Semantic.gs 它是 Web 浏览器对其操作系统的默认分发。

Mixin 库

LESS 提供下表所列的 mixin 库 −

Sr.No.	框架和说明
1	3L 它为 LESS 预处理器提供了最新的 CSS3 功能。
2	animate 它是用于项目中使用的浏览器动画的库。
3	Clearless 它使用可重复使用的 LESS mixins，而不会破坏样式并在样式表中创建过大的大小。
4	Css3LessPlease 它将 css3please.com 转换为 LESS mixins，当您运行CSS。
5	CssEffects 它提供以 LESS mixins 形式编写的 CSS 样式效果。
6	Cssowl 它是一个支持 LESS、SASS 和 Stylus 的 mixin 库。
7	cube.less 这是一个仅使用 CSS 创建的 3D 动画立方体。
8	tRRtoolbelt.less 它是一个提供 mixins 和函数来对 LESS 文件执行操作的库。
9	est 它基于 LESS，允许编写 LESS 代码高效。
10	六边形它创建具有大小和颜色的 CSS 六边形。
11	homeless 它是一个混合库，包含对 Less.js 有用的函数。
12	LESS 元素它是 LESS 预处理器的混合集合。
13	LESS Hat 它是一个混合库，有助于为所有浏览器导出 CSS，并创建大量阴影、渐变和动画等。
14	lessley 它是用 LESS 编写的测试套件。
15	LESS-bidi 它是 LESS mixin 的集合，可提供双向样式而无需重复代码。
16	LESS-Mix 它是一个用 LESS 编写的 mixin 库。
17	media-query-to-type 它用于创建媒体查询，允许 Internet Explorer 8 及以下版本访问内容。
18	More-Colors.less 它在设计 Web 应用程序时提供用于颜色操作的变量。
19	more-less 这是一个允许编写 CSS 代码以实现跨浏览器兼容性的库。
20	More.less 它是 Compass 和 Twitter Bootstrap 的组合，通过使用 CSS3 和跨浏览器混合为 LESS 提供更多功能。
21	more-or-less 它为 less.js 提供了强大的 mixins。
22	normalize.less 它使用 LESS 提供规范化的 CSS。
23	Oban 它是一组 mixins，可加快 Web 应用程序的开发过程。
24	Preboot 它是一组使用 mixins 和变量来编写更好的 CSS 的 LESS 服务，由 Bootstrap 形成。
25	prelude-mixins 它是一个 LESS mixin 库。
26	Shape.LESS 它提供了许多混合函数，用于为应用程序指定各种形状。

Sr.No.	变量使用 &描述
1	概述使用变量可以避免多次重复相同的值。
2	变量插值变量还可以用于其他地方，例如选择器名称、属性名称、URL和@import语句。
3	变量名称我们可以用由值组成的变量名称来定义变量。
4	延迟加载在延迟加载中，即使变量没有被使用，也可以使用它们。
5	默认变量默认变量只有在尚未设置时才能够设置变量。此功能不是必需的，因为可以通过事后定义变量来轻松覆盖变量。

Sr.No.	类型 &描述
1	附加到选择器的扩展扩展连接到选择器，它看起来类似于以选择器为参数的伪类。
2	扩展规则集内部 &:extend(selector) 语法可以放在规则集主体内。
3	扩展嵌套选择器使用 extend 选择器匹配嵌套选择器。
4	使用 Extend 进行精确匹配默认情况下，extend 会查找选择器之间的精确匹配。
5	第 n 个表达式第 n 个表达式的形式在 extend 中很重要，否则，它会将选择器视为不同的。
6	扩展"all" 当关键字 all 在 extend 参数中最后被标识时，LESS 会将该选择器作为另一个选择器的一部分进行匹配。
7	使用扩展进行选择器插值 extend 可以连接到插值选择器。
8	在 @media 内进行范围界定/扩展扩展仅匹配同一媒体内存在的选择器声明。
9	重复检测无法检测选择器的重复。

Sr.No.	类型 &描述
1	定义和调用者范围可见性变量和混合在分离规则集内定义。
2	引用不会修改分离规则集范围仅提供引用，规则集不会访问任何新范围。
3	解锁将修改分离规则集范围分离规则集可以通过导入到范围中来访问范围。

Less 基础教程

语言特性

函数

用法

Less 有用的资源

LESS - 快速指南

LESS - 概述

为什么是 LESS?

历史

特点

优点

缺点

LESS - 安装

LESS 的系统要求

LESS 的安装

示例

hello.htm

style.less

style.css

输出

LESS - 嵌套规则

描述

示例

style.less

style.css

输出

LESS - 嵌套指令和冒泡

描述

示例

style.less

style.css

输出

LESS - 操作

描述

示例

style.less

style.css

输出

LESS - 转义

描述

示例

style.less

style.css

输出

LESS - 函数

描述

示例

style.less

style.css

输出

LESS - 命名空间和访问器

描述

示例

style.less

style.css

输出

LESS - 范围

描述

示例

style.less

style.css

输出

LESS - 注释

说明

示例

style.less

style.css

输出

LESS - 导入

描述

示例

myfile.less

style.less

style.css

输出

LESS - 变量

LESS - Extend 扩展

示例

extend_syntax.htm

style.less