LESS - 快速指南

LESS - 概述

LESS 是一个 CSS 预处理器，可为网站提供可定制、可管理和可重用的样式表。LESS 是一种动态样式表语言，扩展了 CSS 的功能。LESS 也是跨浏览器友好的。

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

为什么更少？

现在让我们了解为什么要使用 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 的系统要求

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

安装LESS

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

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

下载zip 文件的最新功能版本。

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

步骤 3 - 接下来，通过 NPM（节点包管理器）在服务器上安装 LESS。在命令提示符中运行以下命令。

npm install -g less

步骤 4 - 成功安装 LESS 后，您将在命令提示符上看到以下几行 -

`-- less@2.6.1
   +-- errno@0.1.4
   | `--prr@0.0.0
   +-- 优雅-fs@4.1.3
   +-- 图像大小@0.4.0
   +-- mime@1.3.4
   +-- mkdirp@0.5.1
   | `--极简主义@0.0.8
   +-- Promise@7.1.1
   | `--asap@2.0.3
   +-- 请求@2.69.0
   | +-- aws-sign2@0.6.0
   | +-- aws4@1.3.2
   | | `--lru-cache@4.0.0
   | | +-- 伪地图@1.0.2
   | | `-- yallist@2.0.0
   | +-- bl@1.0.3
   | | `--可读流@2.0.6
   | | +-- core-util-is@1.0.2
   | | +-- 继承@2.0.1
   | | +-- isarray@1.0.0
   | | +-- process-nextick-args@1.0.6
   | | +-- string_decoder@0.10.31
   | | `--util-deprecate@1.0.2
   | +-- 无壳@0.11.0
   | +-- 组合流@1.0.5
   | | `--延迟流@1.0.0
   | +-- 扩展@3.0.0
   | +-- 永远代理@0.6.1
   | +-- 表单数据@1.0.0-rc4
   | | `--async@1.5.2
   | +-- har-validator@2.0.6
   | | +-- 粉笔@1.1.1
   | | | +-- ansi-styles@2.2.0
   | | | | `--颜色转换@1.0.0
   | | | +-- 转义字符串-regexp@1.0.5
   | | | +-- has-ansi@2.0.0
   | | | | `--ansi-regex@2.0.0
   | | | +-- strip-ansi@3.0.1
   | | | `-- 支持-color@2.0.0
   | | +-- 指挥官@2.9.0
   | | | `--graceful-readlink@1.0.1
   | | +-- is-my-json-valid@2.13.1
   | | | +-- 生成函数@2.0.0
   | | | +-- 生成对象属性@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
   | | +-- 繁荣@2.10.1
   | | +-- cryptiles@2.0.5
   | | +-- hoek@2.16.3
   | | `--sntp@1.0.9
   | +-- http-signature@1.1.1
   | | +--断言-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
   | +-- 节点 uuid@1.4.7
   | +-- oauth-sign@0.8.1
   | +-- qs@6.0.2
   | +-- stringstream@0.0.5
   | +--tough-cookie@2.2.2
   | `--隧道代理@0.4.2
   `--source-map@0.5.3

例子

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

你好.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中创建。

无风格

@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文件将包含以下代码 -

样式.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

输出

现在让我们执行以下步骤来看看上面的代码是如何工作的 -

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

LESS - 嵌套规则

描述

它是一组 CSS 属性，允许在另一个类中使用一个类的属性，并包含类名作为其属性。在 LESS 中，您可以使用 class 或 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文件。

无风格

.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文件 -

样式.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 - 嵌套指令和冒泡

描述

您可以以与嵌套选择器相同的方式嵌套媒体和关键帧等指令。您可以将该指令放在顶部，并且其相关元素在其规则集中不会更改。这称为冒泡过程。

例子

以下示例演示了 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。

无风格

.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文件 -

样式.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。

无风格

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

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

lessc style.less style.css

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

样式.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文件。

无风格

p {
   color: ~"green";
}

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

lessc style.less style.css

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

样式.css

p {
   color: green;
}

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

输出

现在让我们执行以下步骤来看看上面的代码是如何工作的 -

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

LESS - 函数

描述

LESS 将 JavaScript 代码与值的操作进行映射，并使用预定义的函数来操作样式表中的 HTML 元素方面。它提供了多种操作颜色的函数，例如舍入函数、下取整函数、向上取整函数、百分比函数等。

例子

以下示例演示了 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文件。

无风格

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

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

lessc style.less style.css

现在执行上面的命令；它将使用以下代码自动创建style.css文件 -

样式.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文件。

无风格

.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文件 -

样式.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文件。

无风格

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

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

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

lessc style.less style.css

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

样式.css

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

更少 - 评论

描述

注释使代码对用户来说清晰易懂。你可以在代码中使用块样式和内联注释，但是当你编译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文件。

无风格

/* 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文件 -

样式.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文件。

无风格

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

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

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

lessc style.less style.css

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

样式.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

输出

按照以下步骤查看上面的代码是如何工作的 -

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

LESS - 变量

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

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

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

LESS - 扩展

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

例子

以下示例演示了LESS 文件中扩展的使用-

扩展语法.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文件。

无风格

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

.style {
   background: green;
}

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

lessc style.less style.css

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

样式.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

输出

按照以下步骤查看上面的代码是如何工作的 -

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

扩展语法

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

例子

以下示例演示了LESS 文件中扩展语法的使用-

扩展语法.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:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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

lessc style.less style.css

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

样式.css

.style {
   background: #BF70A5;
}

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

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

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

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

以下是 Extend 的用例类型

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

LESS - 混合

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

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

先生。	Mixin 的用法和描述
1	不输出 Mixin 只需在其后面放置括号即可使 Mixins 在输出中消失。
2	Mixins 中的选择器 mixin 不仅可以包含属性，还可以包含选择器。
3	命名空间命名空间用于将 mixin 分组到一个通用名称下。
4	受保护的命名空间当guard应用于命名空间时，仅当guard条件返回true时，才会使用它定义的mixins。
5	!important 关键字 !important关键字用于覆盖特定属性。

例子

以下示例演示了LESS 文件中mixin的使用-

<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文件。

无风格

.p1 {
   color:red;
}

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

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

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

lessc style.less style.css

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

样式.css

.p1 {
   color: red;
}

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

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

调用 mixin 时括号是可选的。在上面的例子中，两个语句.p1(); 和.p1；做同样的事。

LESS - 参数混合

描述

参数 mixin 使用一个或多个参数来扩展 LESS 的功能，方法是在混合到另一个块时采用参数及其属性来自定义 mixin 输出。

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

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

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

在这里，我们使用参数混合作为.border和三个参数 - 宽度、样式和颜色。使用这些参数，您可以使用传递的参数值自定义 mixin 输出。

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

先生。	类型和描述
1	具有多个参数的混入参数可以使用逗号或分号分隔。
2	命名参数 Mixins 通过使用名称来提供参数值而不是位置。
3	@参数变量当调用 mixin 时，@arguments包含所有传递的参数。
4	高级参数和 @rest 变量 Mixin 通过使用....来获取可变数量的参数。
5	模式匹配通过向 mixin 传递参数来更改其Behave。

LESS - Mixin 作为函数

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

下表详细演示了mixin作为函数的使用。

先生。	Mixin 的用法和描述
1	混合范围 Mixin 由变量组成；这些可以在调用者的范围内使用并且是可见的。
2	混合和返回值 Mixin 与函数类似，mixin 中定义的变量将充当返回值。
3	在另一个 mixin 中进行 mixin 每当一个 mixin 定义在另一个 mixin 中时，它也可以用作返回值。

LESS - 将规则集传递给 Mixins

描述

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

例子

以下示例展示了如何将规则集传递给 LESS 文件中的 mixin -

通过_规则集.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文件。

无风格

@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文件 -

样式.css

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

范围界定

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

下表列出了所有类型的范围 -

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

LESS - 进口指令

描述

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

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

文件扩展名

您可以根据不同的文件扩展名使用@import语句，例如 -

如果您使用.css扩展名，那么它将被视为 CSS 并且@import语句保持原样。
如果它包含任何其他扩展名，那么它将被视为 LESS 并将被导入。
如果没有 LESS 扩展名，那么它将作为导入的 LESS 文件附加并包含在内。

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

例子

以下示例演示了 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>

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

导入目录.less

.myline {
   font-size: 20px;
}

现在，创建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文件 -

样式.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

输出

按照以下步骤查看上面的代码是如何工作的 -

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

LESS - 导入选项

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

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

先生。	导入选项和说明
1	参考它仅使用 LESS 文件作为参考，不会输出它。
2	排队它使您能够将 CSS 复制到输出中而不进行处理。
3	较少的无论文件扩展名是什么，它都会将导入的文件视为常规 LESS 文件。
4	CSS 无论文件扩展名是什么，它都会将导入的文件视为常规 CSS 文件。
5	一次它将仅导入该文件一次。
6	多种的它将多次导入该文件。
7	选修的即使找不到要导入的文件，它也会继续编译。

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

例如 -

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

LESS - Mixin 守卫

描述

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

下表描述了不同类型的 mixins 防护以及说明。

先生。	类型和描述
1	防护比较运算符您可以使用比较运算符 (=) 来比较数字、字符串、标识符等。
2	保护逻辑运算符您可以使用and关键字来解决带有防护的逻辑运算符。
3	类型检查功能它包含用于确定匹配 mixin 的值类型的内置函数。
4	条件混合 LESS 使用默认函数将 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文件。

无风格

.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文件 -

样式.css

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

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

LESS - CSS 守卫

描述

守卫用于匹配简单值或表达式上的多个参数。它应用于 CSS 选择器。这是声明 mixin 并立即调用它的语法。成功带出if类型语句；使用功能&加入此功能，它允许您对多个守卫进行分组。

例子

以下示例演示了在 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文件。

无风格

@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文件 -

样式.css

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

LESS - 循环

在本章中，我们将了解循环在 LESS 中是如何工作的。循环语句允许我们多次执行一条语句或一组语句。当递归 mixin 与Guard Expressions和Pattern Matching结合时，可以创建各种迭代/循环结构。

例子

以下示例演示了 LESS 文件中循环的使用 -

循环示例.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文件。

无风格

.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文件 -

样式.css

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

LESS - 合并

描述

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

下表描述了合并功能支持的两种类型的功能。

先生。	类型和描述
1	逗号它最后增加了财产价值。
2	空间它以空间增加财产价值。

LESS - 父选择器

在本章中，让我们了解父选择器是如何工作的。可以使用&（与号）运算符来引用父选择器。嵌套规则的父选择器由&运算符表示，在将修改类或伪类应用于现有选择器时使用。

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

先生。	类型和描述
1	多种的＆ &将代表最近的选择器以及所有父选择器。
2	更改选择器顺序当选择器顺序更改时，将选择器添加到继承（父）选择器之前非常有用。
3	组合爆炸 &还可以在以逗号分隔的列表中生成选择器的所有可能排列。

例子

以下示例演示了 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文件。

无风格

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

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

lessc style.less style.css

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

样式.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

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

输出

按照以下步骤查看上面的代码是如何工作的 -

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

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

LESS - 杂项函数

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

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

先生。	功能及说明
1	颜色它是一个代表颜色的字符串。
2	图片大小它用于检查文件中图像的尺寸。
3	图像宽度它检查文件中图像的宽度。
4	图像高度它检查文件中图像的高度。
5	转变数字从一种单位转换为另一种单位。
6	数据-uri 数据 uri 是统一资源标识符 (URI) 架构，它在网页上内联获取资源。
7	默认默认函数仅当它在保护条件内可用并且与任何其他 mixin 不匹配时才返回 true。
8	单元默认函数仅当它在保护条件内可用并且与任何其他 mixin 不匹配时才返回 true
9	获取单位 get - 单位函数返回其单位，其中参数包含数字和单位。
10	svg - 渐变 svg-gradient 是一种颜色到另一种颜色的过渡。它可以为同一个元素添加多种颜色。

LESS - 字符串函数

描述

Less 支持一些字符串函数，如下所示 -

逃脱
e
％格式
代替

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

先生。	类型和描述	例子
1	逃脱它通过对特殊字符使用 URL 编码来对字符串或信息进行编码。您无法对某些字符进行编码，例如, , / , ? 、@、&、+、~、！_ 、$、'以及一些您可以编码的字符，例如\、#、^、( , )、{、}、:、>、<、]、[和=。	escape("Hello!! welcome to Tutorialspoint!") 它将转义字符串输出为 - Hello%21%21%20welcome%20to%20Tutorialspoint%21
2	e 它是一个字符串函数，使用字符串作为参数，返回不带引号的信息。这是一个 CSS 转义，它使用~"some content"转义值

先生。

类型和描述

例子

逃脱

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

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

它将转义字符串输出为 -

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

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

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

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

先生。	导入选项和说明
1	参考它仅使用 LESS 文件作为参考，不会输出它。
2	排队它使您能够将 CSS 复制到输出中而不进行处理。
3	较少的无论文件扩展名是什么，它都会将导入的文件视为常规 LESS 文件。
4	CSS 无论文件扩展名是什么，它都会将导入的文件视为常规 CSS 文件。
5	一次它将仅导入该文件一次。
6	多种的它将多次导入该文件。
7	选修的即使找不到要导入的文件，它也会继续编译。

先生。	功能及说明
1	颜色它是一个代表颜色的字符串。
2	图片大小它用于检查文件中图像的尺寸。
3	图像宽度它检查文件中图像的宽度。
4	图像高度它检查文件中图像的高度。
5	转变数字从一种单位转换为另一种单位。
6	数据-uri 数据 uri 是统一资源标识符 (URI) 架构，它在网页上内联获取资源。
7	默认默认函数仅当它在保护条件内可用并且与任何其他 mixin 不匹配时才返回 true。
8	单元默认函数仅当它在保护条件内可用并且与任何其他 mixin 不匹配时才返回 true
9	获取单位 get - 单位函数返回其单位，其中参数包含数字和单位。
10	svg - 渐变 svg-gradient 是一种颜色到另一种颜色的过渡。它可以为同一个元素添加多种颜色。