目录
  1. WIKI教程
  2. 学习Less
  3. Less - 快速指南

Less - 快速指南

LESS - Overview

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

CSS预处理器是一种脚本语言，它扩展了CSS并编译成常规的CSS语法，因此可以通过Web浏览器读取。 它提供了variables ， functions ， mixins和operations等functions ，允许您构建动态CSS。

为什么少？

现在让我们理解为什么我们使用LESS。

  • LESS支持更快，更轻松地创建更清晰，跨浏览器友好的CSS。

  • LESS采用JavaScript设计，也可以在live ，比其他CSS预处理器编译速度更快。

  • LESS使您的代码保持模块化，这非常重要，因为它使其可读且易于更改。

  • 通过使用LESS variables可以实现更快的维护。

历史 (History)

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

特点 (Features)

  • 更清晰，更易读的代码可以有条理的方式编写。

  • 我们可以定义样式，它可以在整个代码中重用。

  • LESS基于JavaScript，是一套超级CSS。

  • LESS是一个灵活的工具，可以解决代码冗余问题。

优势 (Advantages)

  • LESS很容易生成适用于浏览器的CSS。

  • LESS使您可以使用nesting编写更好且组织良好的代码。

  • 通过使用variables可以更快地实现维护。

  • LESS使您可以通过在规则集中引用它们来轻松地重用所有类。

  • LESS提供了使编码更快并节省时间的操作。

缺点 (Disadvantages)

  • 如果您不熟悉CSS预处理，需要花时间学习。

  • 由于模块之间的紧密耦合，应该更多地努力重用和/或测试相关模块。

  • 与像SASS这样的老式预处理器相比，LESS的框架更少，后者由框架Compass ， Gravity和Susy 。

LESS - Installation

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

LESS的系统要求

  • Operating System - 跨平台

  • Browser Support - IE（Internet Explorer 8+），Firefox，谷歌浏览器，Safari。

安装LESS

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

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

减少安装

下载zip文件的Latest Features版本。

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

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

npm install -g less

Step 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

例子 (Example)

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

hello.htm

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

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

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;
}

输出 (Output)

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

  • 将以上html代码保存在hello.htm文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

减少安装

LESS - Nested Rules

描述 (Description)

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

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在nested_rules.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

较少的嵌套规则

LESS - Nested Directives and Bubbling

描述 (Description)

您可以以与嵌套选择器的方式相同的方式嵌套指令（如media和keyframe 。 您可以将指令置于顶部，并且不会在其规则集内更改其相关元素。 这被称为冒泡过程。

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在nested_directives_bubbling.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

较少的嵌套指令

LESS - Operations

描述 (Description)

LESS为某些算术运算提供支持，例如加号（+），减号（ - ），乘法（*）和除法（/），它们可以对任何数字，颜色或变量进行操作。 当您使用变量时，操作可以节省大量时间，并且您希望从事简单的数学运算。

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在operations.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

减少运营

LESS - Escaping

描述 (Description)

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

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在escaping.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

减少逃脱

LESS - 函数

描述 (Description)

LESS通过操纵值映射JavaScript代码，并使用预定义函数来处理样式表中的HTML元素方面。 它提供了几种操作颜色的功能，如圆形功能，地板功能，电池功能，百分比功能等。

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在functions.html文件中。

  • 在浏览器中打开此HTML文件，显示您将收到以下输出。

功能较少

LESS - Namespaces and Accessors

描述 (Description)

命名空间用于以通用名称对mixin进行分组。 使用名称空间，可以避免名称冲突，并从外部封装一组mixins。

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在namespaces_accessors.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

范围较小

LESS - Scope

描述 (Description)

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

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在scope.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

范围较小

LESS - Comments

描述 (Description)

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

例子 (Example)

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

输出 (Output)

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

  • 将上述html代码保存在comments.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

少评论

LESS - Importing

描述 (Description)

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

例子 (Example)

以下示例演示了在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.iowiki.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

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

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

lessc style.less style.css

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

style.css

.myclass {
   color: #FF8000;
}
.myclass1 {
   color: #5882FA;
}
.myclass2 {
   color: #FF0000;
}

输出 (Output)

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

  • 将上述html代码保存在importing.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

少进口

LESS - Variables

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

下表详细说明了LESS variables的使用。

Sr.No. 变量用法和描述
1 Overview

通过使用variables可以避免多次重复相同的值。

2 Variable Interpolation

变量也可以用在其他地方，如selector names ， property names ， URL和@import语句。

3 Variable Names

我们可以使用由值组成的变量名来定义变量。

4 Lazy Loading

在延迟加载中，即使它们不是，也可以使用变量。

5 默认变量

默认变量只有在尚未设置变量时才能设置变量。 此功能不是必需的，因为之后通过定义变量可以轻松覆盖变量。

LESS - Extend

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

例子 (Example)

以下示例演示了在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 IoWiki</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

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

style.less

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

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

lessc style.less style.css

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

style.css

h2 {
   font-style: italic;
}
.style,
h2 {
   background: blue;
}

输出 (Output)

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

  • 将上述html代码保存在extend_syntax.htm文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

减少延伸

扩展语法

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

例子 (Example)

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

extend_syntax.htm 

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   <body>
      <div class = "style">
         <h2>Welcome to IoWiki</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;
}

输出 (Output)

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

  • 将上述html代码保存在extend_syntax.htm文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

减少延伸

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

Sr.No. 类型和描述
1 Extend Attached to Selector

Extend连接到一个选择器，它看起来类似于带有selector作为参数的伪类。

2 扩展内部规则集

&:extend(selector)语法可以放在规则集的主体内。

3 Extending Nested Selectors

使用extend选择器匹配嵌套选择器。

4 与Extend完全匹配

默认情况下， extend查找选择器之间的完全匹配。

5 nth Expression

第n个表达式的形式在扩展中很重要，否则它将选择器视为不同。

6 Extend "all"

当在extend参数中最后标识关键字all时，LESS将该选择器与另一个选择器的一部分匹配。

7 Selector Interpolation with Extend

extend可以连接到插值选择器。

8 在@media内部范围/扩展

Extend仅匹配同一媒体声明中存在的选择器。

9 Duplication Detection

它无法检测到选择器的重复。

以下是Extend的用例类型

Sr.No. 类型和描述
1 Classic Use Case

经典用例用于避免在LESS中添加基类。

2 减少CSS大小

Extend用于将选择器移动到您想要使用的属性; 这有助于减少css生成的代码。

3 结合样式/更高级的Mixin

使用extend我们可以将特定选择器的相同样式组合到其他选择器中。

LESS - Mixins

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

下表详细说明了LESS mixins的用法。

Sr.No. Mixins用法和描述
1 不输出Mixin

通过简单地将括号放在后面，可以使Mixins在输出中消失。

2 Mixins中的选择器

mixin不仅可以包含属性，还可以包含选择器。

3 Namespaces

命名空间用于以通用名称对mixin进行分组。

4 Guarded Namespaces

当guard应用于名称空间时，仅在保护条件返回true时才使用由其定义的mixins。

5 ！important关键字

!important关键字用于覆盖特定属性。

例子 (Example)

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

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>
   <body>
      <h1>Welcome to IoWiki</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;
}

输出 (Output)

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

  • 将上述html代码保存在less_mixins.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

LESS Mixins

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

LESS - Parametric Mixins

描述 (Description)

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

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

.border(@width; @style; @color) {
   border: @width @style @color;
}
.myheader {
   .border(2px; dashed; green);
}

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

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

Sr.No. 类型和描述
1 具有多个参数的混合

可以使用逗号或分号分隔参数。

2 命名参数

Mixins通过使用其名称提供参数值而不是位置。

3 @arguments变量

调用mixin时， @arguments包含所有传递的参数。

4 高级参数和@rest变量

Mixin使用....获取可变数量的参数。

5 Pattern-matching

通过向其传递参数来更改mixin的行为。

LESS - Mixins as Functions

在本章中，我们将了解Mixins as Functions的重要性。 与函数类似，mixins可以嵌套，也可以接受参数，也可以返回值。

下表演示了mixins作为函数的详细用法。

Sr.No. Mixins用法和描述
1 Mixin范围

Mixins由变量组成; 这些可以在调用者的范围内使用并且是可见的。

2 Mixin和返回值

Mixins与函数类似，mixin中定义的变量将作为返回值。

3 Mixin在另一个mixin里面

每当mixin在另一个mixin中定义时，它也可以用作返回值。

LESS - Passing Rulesets to Mixins

描述 (Description)

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

例子 (Example)

以下示例显示如何将规则集传递给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 IoWiki</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;
}

输出 (Output)

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

  • 将以上html代码保存在passing_ruleset.htm文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

mixin的规则集较少

Scoping

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

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

Sr.No. 类型和描述
1 定义和来电范围可见性

变量和mixin在分离的规则集中定义。

2 引用不会修改分离的规则集范围

仅提供引用，规则集不会访问任何新范围。

3 解锁将修改分离的规则集范围

分离的规则集可以通过导入到范围来访问范围。

LESS - Import Directives

描述 (Description)

@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

例子 (Example)

以下示例演示了在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 IoWiki...</p>
   </body>
</html>

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

import_dir.less

.myline {
   font-size: 20px;
}

现在，创建style.less文件。

style.less

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

style.less文件将从路径https://www.iowiki.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;
}

输出 (Output)

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

  • 将上述html代码保存在import_directives.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

进口指令

LESS - Import Options

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

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

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

描述 (Description)

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

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

Sr.No. 类型和描述
1 Guard比较运算符

您可以使用比较运算符（=）来比较数字，字符串，标识符等。

2 保护逻辑运算符

您可以使用and关键字来处理带有警卫的逻辑运算符。

3 Type Checking Functions

它包含内置函数，用于确定匹配mixin的值类型。

4 Conditional Mixins

LESS使用default函数将mixin与其他混合匹配相匹配。

例子 (Example)

以下示例演示了在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 IoWiki...</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;
}

输出 (Output)

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

  • 将上述html代码保存在mixin-guard.html文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

Mixin Guards

LESS - CSS Guards

描述 (Description)

防护用于匹配简单值或表达式上的许多参数。 它适用于CSS选择器。 它是声明mixin并立即调用它的语法。 要成功显示if类型语句; 加入这个功能& ，它允许您分组多个警卫。

例子 (Example)

以下示例演示了在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 IoWiki</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;
}

输出 (Output)

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

  • 将上述html代码保存在css_guard.htm文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

减少警卫

LESS - Loops

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

例子 (Example)

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

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   <body>
      <div class = "cont">
         <h2>Welcome to IoWiki</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;
}

输出 (Output)

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

  • 将上述html代码保存在loop_example.htm文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

减少警卫

LESS - Merge

描述 (Description)

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

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

Sr.No. 类型和描述
1 Comma

它最后增加了属性值。

2 Space

它增加了空间属性值。

LESS - Parent Selectors

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

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

Sr.No. 类型和描述
1 多 ＆

&将表示最近的选择器以及所有父选择器。

2 Changing Selector Order

在更改选择器排序时，将选择器预先添加到继承的（父）选择器非常有用。

3 Combinatorial Explosion

&也可以在逗号分隔的列表中生成所有可能的选择器排列。

例子 (Example)

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

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>
   <body>
      <h2>Welcome to IoWiki</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 。

输出 (Output)

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

  • 将上述html代码保存在parent_selector1.htm文件中。

  • 在浏览器中打开此HTML文件，将显示以下输出。

较少的父选择器

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

LESS - Misc 函数

杂项功能由一组不同类型的功能组成。

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

Sr.No. 功能和描述
1 color

它是一个代表颜色的字符串。

2 image - size

它用于检查文件中图像的尺寸。

3 图像 - 宽度

它检查文件中图像的宽度。

4 图像 - 高度

它检查文件中图像的高度。

5 convert

数字从一个单位转换为另一个单位。

6 数据 - uri

数据uri是统一资源标识符（URI）模式，它在网页上获取内联资源。

7 default

默认函数仅在保护条件内可用且与任何其他mixin不匹配时才返回true。

8 unit

默认函数仅在保护条件内可用且与任何其他mixin不匹配时才返回true

9 得到 - 单位

get - unit函数返回其参数所在的单位，包括数字和单位。

10 svg - 渐变

svg-gradient是一种颜色到另一种颜色的过渡。 它可以为同一个元素添加许多颜色。

LESS - 字符串函数

描述 (Description)

Less支持下面列出的一些字符串函数 -

  • escape
  • e
  • ％格式
  • replace

下表描述了上述字符串函数以及描述。

Sr.No. 类型和描述 例
1

Escape

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

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

它输出转义字符串为 - 

Hello%21%21%20welcome%20to%20IoWiki%21
2

e

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

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

它输出转义字符串为 - 

filter: Hello!! welcome to IoWiki!;
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 IoWiki!");

它将字符串替换为 - 

"Welcome, to IoWiki!"

LESS - List 函数

描述 (Description)

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

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

Sr.No. 功能说明
1 Length

它将以逗号或空格分隔的值列表作为参数。

2 Extract

它将返回列表中指定位置的值。

LESS - Math 函数

描述 (Description)

数学函数包括用于执行数字运算的方法，例如圆形，平方根，功率值，模数，百分比等。

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

Sr.No. 功能说明 例
1

ceil

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

ceil(0.7)

它将数字四舍五入到 - 

1
2

floor

它将数字向下舍入到下一个最小整数。 

floor(3.3)

它将数字四舍五入到 - 

3
3

percentage

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

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

LESS - Type 函数

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

下表显示了LESS中使用的Type Functions 。

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 ，如果value是一个颜色，如果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

它接受一个值作为参数，如果value是关键字，则返回true ;如果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

它接受一个值作为参数并返回true ，如果value是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 ，如果value是一个以像素为单位的数字，否则返回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

它接受一个值作为参数，如果value是em值，则返回true ;如果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 ，如果value是百分比或返回false ，如果value不是百分比。 

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

如果值是作为参数提供的指定单位的数字，则返回false如果value不是指定单位的数字，则返回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

如果value是规则集，则它将value作为参数并返回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 - Color Defination Functions

描述 (Description)

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)

LESS - Color Channel Functions

在本章中，我们将了解颜色通道功能在LESS中的重要性。 LESS支持很少的内置函数，可以设置关于通道的值。 通道根据颜色定义设置值。 HSL颜色具有色调，饱和度和亮度通道，RGB颜色具有红色，绿色和蓝色通道。 下表列出了所有颜色通道功能 -

Sr.No. 功能说明 例
1

hue

在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 - Color Operation

描述 (Description)

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 - Color Blending Functions

在本章中，我们将了解LESS中的Color Blending Functions 。 这些是类似于Photoshop，Fireworks或GIMP等图像编辑器中使用的操作，它们将CSS颜色与图像相匹配。

下表显示了LESS中使用的颜色混合功能。

Sr.No. 功能和描述
1 multiply

它将两种颜色相乘并返回结果颜色。

2 screen

它需要两种颜色并返回更亮的颜色。 它与multiply函数相反。

3 overlay

它通过组合multiply和screen的效果来生成结果。

4 softlight

它的工作原理类似于overlay但它只使用了一部分颜色，柔和地突出显示另一种颜色。

5 hardlight

它的工作原理类似于overlay但颜色的作用相反。

6 difference

它从第一个输入颜色中减去第二个输入颜色。

7 exclusion

它的工作原理类似于difference功能，但对比度较低。

8 average

它以每个通道（RGB）为基础计算两种输入颜色的平均值。

9 negation

它与difference函数相反，它从第二种颜色中减去第一种颜色。

LESS - Command Line Usage

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

在全球范围内安装lessc以供使用

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

npm install less -g

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

安装节点开发

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

npm i less -save-dev

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

lessc的Beta版本

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

安装未发布的lessc开发版本

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

服务器端和命令行用法

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

Command Line Usage

当source设置为破折号或连字符（ - ）时，从stdin读取stdin 。 

lessc [option option = parameter ...] <source> [destination]
</source>

例如，我们可以使用以下命令编译.less到.css - 

lessc stylesheet.less stylesheet.css

我们可以编译.less到.css ，并使用以下命令缩小结果。 

lessc -x stylesheet.less stylesheet.css

选项 (Options)

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

Sr.No. 选项和说明 命令
1

Help

将显示帮助消息，其中包含可用选项。 

lessc -help
lessc -h
2

Include Paths

它包括库的可用路径。 可以在Less文件中简单地和相对地引用这些路径。 窗口中的路径由冒号（:)或分号（;）分隔。 

lessc --include-path = PATH1;PATH2
3

Makefile

它生成一个makefile import dependencies列表到stdout作为输出。 

lessc -M
lessc --depends
4

No Color

它禁用彩色输出。 

lessc --no-color
5

No IE Compatibility

它禁用IE兼容性检查。 

lessc --no-ie-compat
6

Disable Javascript

它在较少的文件中禁用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

它以较少的方式生成源图。 如果没有文件名定义了sourcemap选项，那么它将使用带有Less文件名作为源的扩展名映射。 

lessc --source-map
lessc -source-map = file.map
14

Source Map Rootpath

指定了根路径，应将其添加到源映射内的较少文件路径中，也应添加到输出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文件都应包含在源图中。 

lessc --source-map-less-inline
17

Source Map Map Inline

它指定在输出css中，映射文件应该是内联的。 

lessc --source-map-map-inline
18

Source Map URL

允许URL覆盖css中映射文件中的点。 

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 - Using Less In The Browser

如果要在需要时动态编译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是重要性级别。

  • 数据属性不能用驼峰写成; 链接标记选项表示为时间选项。

  • 具有非字符串值的数据属性应该是JSON有效的。

观看模式

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

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

修改变量

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

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

调试(Debugging)

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

选项 (Options)

在加载脚本文件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已经与较少的文件相对。 它是一种布尔类型。

  • globalVars - 将全局变量列表插入代码中。 字符串类型变量应包含在引号中

  • modifyVars - 与全局变量选项不同。 它会在您的less文件末尾移动声明。

  • rootpath - 它在每个URL资源的开头设置路径。

  • useFileCache - 使用每个会话文件缓存。 较少文件中的缓存用于调用modifyVars，其中所有较少的文件将不再检索。

LESS - Browser support

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

  • 拼写错误，
  • Color changes,
  • Texture
  • Look
  • Links, etc.

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

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

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

LESS - Plugins

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

Command Line

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

npm install less-plugin-clean-css

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

lessc --plugin = path_to_plugin = options

在代码中使用插件

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

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中可用的插件。

Postprocessor/Feature Plugins

Sr.No. 插件和说明
1 Autoprefixer

它用于在从LESS转换后为CSS添加前缀。

2 CSScomb

它有助于改进样式表的维护。

3 clean-css

它缩小了LESS的CSS输出。

4 CSSWring

它压缩或缩小LESS的CSS输出。

5 css-flip

它用于从左到右（LTR）或从右到左（RTL）生成CSS。

6 functions

它将LESS的功能写入LESS本身。

7 glob

它用于导入多个文件。

8 group-css-media-queries

它对Less进行后处理。

9 inline-urls

自动将URL转换为数据uri。

10 npm-import

它从npm包中导入更少。

11 pleeease

它用于后处理Less。

12 rtl

LESS从ltr（从左到右）到rtl（从右到左）反转。

Framework/Library Importers

Sr.No. 进口商和描述
1 Bootstrap

Bootstrap LESS代码在自定义LESS代码之前导入。

2 Bower Resolve

从Bower包导入LESS文件。

3 less.js的Cardinal CSS

在自定义LESS代码之前，导入Cardinal的LESS代码。

4 Flexbox网格

最常导入的Framework或库导入程序。

5 灵活的网格系统

它导入灵活网格系统。

6 Ionic

它进口离子骨架。

7 Lesshat

它导入Lesshat mixins。

8 Skeleton

它导入骨架少的代码。

功能库

Sr.No. 进口商和描述
1 advanced-color-functions

它用于找到更多对比色。

2 cubehelix

使用伽马校正值1，cubehelix函数可以返回两种颜色之间的颜色。

3 lists

这列出了操作函数库。

对于插件作者

较少允许作者与较少合并。 

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

  • pluginManager提供了一个可以添加文件管理器，后处理器或访问者的持有者。

  • setOptions函数传递字符串。

  • printUsage函数用于解释选项。

LESS - Programmatic Usage

LESS中程序化使用的要点是更少的函数。 此函数在LESS中使用以下格式 - 

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

该功能也可以用以下方式编写 - 

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

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

sourceMap选项允许设置sourcemap选项，例如sourceMapURL ， sourceMapBasepath ， sourceMapRootpath ， outputSourceFiles和sourceMapFileInline 。 这里需要考虑的一点是sourceMap选项不可用。

您可以通过添加侦听器来访问日志，如下面的格式所示 - 

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

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

LESS - Online Compilers

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

支持较少的在线Web IDE/Playgrounds

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

Sr.No. 在线Web IDE和描述
1 CSSDeck实验室

在这里，您可以轻松创建涉及HTML，CSS，JS代码的测试用例。

2

CodePen

这是前端网络的游乐场。

3 Fiddle Salad

您可以在此处添加环境中的现有代码。

4 JS Bin

这有助于Javascript和CSS代码。

5 jsFiddle

这是一个在线网络编辑器。

LESS - GUIs

在本章中，我们将了解LESS的GUIs 。 您可以为您的平台使用不同的LESS工具。 有关command line用法和工具，请单击此link 。

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

Sr.No. 工具和说明
1 Crunch 2!

它支持Windows, Mac和Linux等跨平台。 它为编辑器提供集成编译。

2

Mixture

它是设计人员和开发人员使用的快速原型设计和静态网站生成工具。 它快速，高效，适用于您的编辑器。 它汇集了一系列令人敬畏的工具和最佳实践。

3 SimpLESS

它是一个简约的LESS编译器。 它提供拖放和编译功能。 SimpLESS支持使用prefixing CSS prefixing ，这是prefixr的独特功能。 它建立在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的继承者，并且在SASS，Jade，Markdown等许多其他处理语言中支持LESS。

2 LiveReload

它编辑CSS并立即更改图像。 SASS，LESS，CoffeeScript等工作得很好。

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

Sr.No. 工具和说明
1 Plessc

这是lessc的gui前端。 它具有日志查看器，自动编译，使用所选编辑器和源图支持打开LESS文件等功能。

LESS - Editors and Plugins

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

现在让我们讨论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提供Emacs模式（lesscss.org）; Emacs支持compile-on-save。

7 jetBrains WebStorm和PhpStorm

WebStrom是一个轻量级且功能强大的IDE。 它非常适合使用Node.js进行复杂的客户端和服务器开发。 PhpStorm是一个PHP IDE，支持深入的代码理解，并为所有主要工具和框架提供一流的编码帮助和支持。

8 Brackets

它是一个轻量级，功能强大的开源代码编辑器，可以帮助Web设计人员和前端开发人员。

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工具包工具

这是一个适用于HTML5，CSS3，JavaScript等的现代Web编辑器。 有了这个，您可以从符合现代标准的编辑器编辑，预览，验证发布和管理项目。

Sublime Text 2＆3

sublime文本为LESS提供了不同的选项，如下表所示 -

Sr.No. 选项和说明
1 Less-sublime

sublime文本的LESS语法为.less文件提供语法高亮，以及片段。

2 Sublime-Less-to-CSS

Sublime text 2 and 3 plugin to compile .less files to CSS when you save. It requires lessc installed on PATH.

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为LESS提供以下不同选项 -

Sr.No. 选项和说明
1 CSS更少

此扩展使LESS文件使用CSS语言服务打开。

2 Web Essentials 2012

此扩展允许您更轻松地执行常见任务，并为Visual Studio for Web开发人员添加有用的功能。

3 Web Essentials 2013

它扩展了Visual Studio的许多新功能，这些功能并非特定于特定语言或编辑器。

4 Web Tools 2013

这有助于您完成涉及ASP.NET的开发任务

Dreamweaver (Dreamweaver)

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

  • 它是Web应用程序和开发人员用来创建应用程序和网站的Adobe应用程序。

  • 它能够跨多个平台工作，包括浏览器，设备和平板电脑。

  • Web设计人员使用Dreamweaver创建网站原型。

  • DMXzone Less CSS Compiler直接在Dreamweaver中创建所有LESS CSS功能。

Notepad++ 6.x

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

  • Notepad ++是一个自由文本编辑器和源代码编辑器，支持选项卡式编辑，即在一个窗口中处理多个打开的文件。

  • LESS for Notepad ++是一个xml文件，为.less文件提供语法高亮或着色。 要获取更多信息，请单击此link 。

  • 要安装Notepad ++，请单击此link 。

LESS - Third Party Compilers

Node.js Compilers

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

grunt-contrib-less

Grunt是Node任务运行者。 每次提交对LESS文件的更改时，它都会编译样式表。

assemble-less

assemble-less是一个强大的grunt插件，用于将LESS文件编译为CSS。 较少的任务使用JSON和Lo - dash（下划线）模板来定义LESS包，UI组件，压缩样式表或主题。

gulp-less

它是Gulp的LESS插件。 gulp-minify-css用于缩小CSS。 gulp-sourcemaps用于生成源图库。

RECESS

它是一个基于LESS构建的开源工具，有助于优化CSS代码。 它使CSS代码错误免费，清洁和易于管理。

autoless

这是一个无文件观察者。 它包含依赖关系跟踪和跨平台通知。

为Less.js连接中间件

它用于允许处理LESS文件的连接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脚本宿主

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

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

OR 

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

您可以访问以下链接以了解有关Windows的Less.js的更多信息

dotless

以下是为Windows运行无点的命令行编译器。 

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

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

LESS - Frameworks

UI /主题框架和组件

LESS支持下表中列出的一些UI/Theme框架 -

Sr.No. 框架和描述
1 1pxdeep

它是平坦的Bootstrap 3主题，提供强大的配色方案控件。

2 Bootflat

它是一个基于Bootstrap的开源框架。

3 BootPress

它是一个基于平面文件CMS的PHP框架

4 Bootstrap

它是功能强大的移动第一前端框架，可实现更快，更轻松的Web开发。

5 Bootstrap a11y主题

它为Web开发提供了方便的可访问性。

6 Bootswatch

它是一个开源主题，为Bootstrap提供免费主题。

7 Cardinal

它是移动优先的CSS框架，允许为响应式网站，用户界面和应用程序维护CSS。

8 CSSHorus

它是一个可以轻松开发移动网站的库。

9 平面UI免费

它基于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 Style。

17 Pre

它是使用LESS的CSS框架。

18 prelude

它是使用LESS的前端CSS框架。

19 Schema

它是一个轻松的响应式框架，有助于构建复杂的网站。

20 语义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 灵活的网格系统

它是一个CSS框架，以灵活的方式创建Web项目。

2 adaptGrid

它是一个用于开发Web应用程序的响应式网格系统。

3 Fluidable

它是基于LESS预处理器的轻量级响应网格系统。

4 Golden Grid System

它是响应式设计的网格系统。

5 LESS Zen Grid

它用于解决子像素舍入问题。

6 Order.less

它是一个LESS库，用于对齐，网格系统和模块化秤。

7 responsibly

它是一个可定制的独立网格系统。

8 Responsive Boilerplate

它是一个轻量级网格系统，用于为网站创建响应式网页设计。

9 Semantic.gs

它是其操作系统的Web浏览器的默认分发。

Mixin图书馆

LESS提供下表中列出的mixin库 -

Sr.No. 框架和描述
1 3L

它为LESS预处理器提供最新的CSS3功能。

2 animate

它是用于项目中使用的浏览器动画的库。

3 Clearless

它使用可重复使用的LESS mixin而不会破坏样式并在样式表中创建过多的大小。

4 Css3LessPlease

它将css3please.com转换为LESS mixins，当您运行CSS时，元素将立即发生变化。

5 CssEffects

它提供了作为LESS mixins编写的CSS样式效果。

6 Cssowl

它是一个mixin库，支持LESS，SASS和Stylus。

7 cube.less

它是仅使用CSS创建的3D动画多维数据集。

8 tRRtoolbelt.less

它是一个库，提供用于对LESS文件执行操作的mixins和函数。

9 est

它基于LESS，允许更有效地编写LESS代码。

10 Hexagon

它创建了具有大小和颜色的CSS六边形。

11 homeless

它是一个mixin库，包含Less.js的有用功能。

12

LESS Elements

它是LESS预处理器的mixins集合。

13 LESS Hat

它是一个mixin库，有助于为所有浏览器导出CSS并创建多个阴影，渐变和动画等。

14 lessley

它是用LESS编写的测试套件。

15 LESS-bidi

它是LESS mixins的集合，提供双向样式，无需重复代码。

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和跨浏览器mixins为LESS提供更多功能。

21 more-or-less

它为less.js提供强大的mixins。

22 normalize.less

它使用LESS提供规范化的CSS。

23 Oban

它是mixins的集合，可加速Web应用程序的开发过程。

24 Preboot

它是一组LESS服务，它使用mixins和变量来编写更好的CSS，并由Bootstrap构成。

25 prelude-mixins

这是一个LESS mixin库。

26 Shape.LESS

它提供了许多mixin，用于指定应用程序的各种形状。

<上一篇.更少 - 框架( Frameworks)
Less - 有用的资源.下一篇>
↑回到顶部↑
WIKI教程 @2018