![Less Tutorial](/less/images/less-mini-logo.jpg)
- 语言特性
- LESS - 嵌套规则
- LESS - 嵌套指令和冒泡
- LESS - 操作
- LESS - 转义
- LESS - 函数
- LESS - 命名空间和访问器
- LESS - 作用域
- LESS - 注释
- LESS - 导入
- LESS - 变量
- LESS - 扩展
- LESS - 混合宏
- LESS - 参数化混合宏
- LESS - 混合宏作为函数
- LESS - 将规则集传递给混合宏
- LESS - 导入指令
- LESS - 导入选项
- LESS - 混合宏保护
- LESS - CSS 保护
- LESS - 循环
- LESS - 合并
- LESS - 父选择器
- 函数
- LESS - 杂项函数
- LESS - 字符串函数
- LESS - 列表函数
- LESS - 数学函数
- LESS - 类型函数
- LESS - 颜色定义函数
- LESS - 颜色通道函数
- LESS - 颜色操作
- LESS - 颜色混合函数
- 用法
- LESS - 命令行用法
- 在浏览器中使用 LESS
- LESS - 浏览器支持
- LESS - 插件
- LESS - 程序化用法
- LESS - 在线编译器
- LESS - GUI
- LESS - 编辑器和插件
- LESS - 第三方编译器
- LESS - 框架
- LESS 有用资源
- LESS - 快速指南
- LESS - 有用资源
- LESS - 讨论
LESS - 快速指南
LESS - 概述
LESS 是一种 CSS 预处理器,它能够为网站提供可定制、可管理和可重用的样式表。LESS 是一种动态样式表语言,扩展了 CSS 的功能。LESS 也是跨浏览器友好的。
CSS 预处理器是一种脚本语言,它扩展了 CSS 并被编译成常规的 CSS 语法,以便您的 Web 浏览器可以读取它。它提供了诸如变量、函数、混合宏和操作等功能,允许您构建动态 CSS。
为什么要使用 LESS?
现在让我们了解一下我们为什么要使用 LESS。
LESS 支持更快、更轻松地创建更简洁、跨浏览器友好的 CSS。
LESS 使用 JavaScript 设计,并且还创建为实时使用,编译速度比其他 CSS 预处理器快。
LESS 以模块化的方式保持您的代码,这通过使其可读和易于更改非常重要。
通过使用 LESS变量可以实现更快的维护。
历史
LESS 由Alexis Sellier于 2009 年设计。LESS 是开源的。LESS 的第一个版本是用 Ruby 编写的;在后来的版本中,Ruby 的使用被 JavaScript 替代了。
特性
可以用有组织的方式编写更简洁、更易读的代码。
我们可以定义样式,并且可以在整个代码中重用它。
LESS 基于 JavaScript 并且是 CSS 的超集。
LESS 是一种敏捷工具,可以解决代码冗余问题。
优点
LESS 可以轻松生成跨浏览器有效的 CSS。
LESS 通过使用嵌套使您能够编写更好、更有条理的代码。
通过使用变量可以实现更快的维护。
LESS 使您能够通过在规则集中引用它们来轻松地重用整个类。
LESS 提供了操作的使用,这使得编码更快并节省了时间。
缺点
如果您不熟悉 CSS 预处理,则需要花费时间学习。
由于模块之间的紧密耦合,应付出更多努力来重用和/或测试相关模块。
与像 SASS 这样的旧预处理器相比,LESS 的框架较少,SASS 包括Compass、Gravity和Susy框架。
LESS - 安装
在本章中,我们将逐步了解如何安装 LESS。
LESS 的系统要求
操作系统 - 跨平台
浏览器支持 - IE(Internet Explorer 8+)、Firefox、Google Chrome、Safari。
LESS 的安装
现在让我们了解 LESS 的安装。
步骤 1 - 我们需要NodeJs来运行 LESS 示例。要下载 NodeJs,请打开链接https://node.org.cn/en/,您将看到如下所示的屏幕 -
![Less Installation](/less/images/less-installation/less-installation.jpg)
下载最新功能版本的 zip 文件。
步骤 2 - 运行安装程序以在您的系统上安装Node.js。
步骤 3 - 接下来,通过 NPM(Node 包管理器)在服务器上安装 LESS。在命令提示符中运行以下命令。
npm install -g less
步骤 4 - 成功安装 LESS 后,您将在命令提示符上看到以下行 -
`-- [email protected] +-- [email protected] | `-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] | `-- [email protected] +-- [email protected] | `-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | | `-- [email protected] | | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | `-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | `-- [email protected] | | `-- [email protected] | | `-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | `-- [email protected] | | `-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | `-- [email protected] `-- [email protected]
示例
以下是 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>
现在让我们创建一个style.less文件,它与 CSS 非常相似,唯一的区别是它将以.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
![Less Installation](/less/images/less-installation/less-installation-step2.jpg)
当您运行上述命令时,它将自动创建style.css文件。每当您更改 LESS 文件时,都需要在cmd中运行上述命令,然后style.css文件将被更新。
当您运行上述命令时,style.css文件将包含以下代码 -
style.css
h1 { color: #FF7F50; } h3 { color: #800080; }
输出
现在让我们执行以下步骤来查看上述代码的工作原理 -
将上述 html 代码保存在hello.htm文件中。
在浏览器中打开此 HTML 文件,将显示以下输出。
![Less Installation](/less/images/less-installation/less-installation-step3.jpg)
LESS - 嵌套规则
描述
它是一组 CSS 属性,允许将一个类的属性用于另一个类,并将类名作为其属性。在 LESS 中,您可以像使用类或 ID 选择器一样使用 CSS 样式声明混合宏。它可以存储多个值,并且可以在需要时在代码中重用。
示例
以下示例演示了在 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 Nested Rules](/less/images/less_features_overview/nested_rules.jpg)
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 Nested Directives](/less/images/less_nested_directive_bubbling/nested_directive.jpg)
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 Operations](/less/images/less_operations/operations.jpg)
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; }
在~"some_text"中编写的任何内容在将 LESS 代码编译为 CSS 代码后都将显示为some_text。
输出
现在让我们执行以下步骤来查看上述代码的工作原理 -
将上述 html 代码保存在escaping.html文件中。
在浏览器中打开此 HTML 文件,将显示以下输出。
![Less Escaping](/less/images/less_escaping/escaping.jpg)
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 Functions](/less/images/less_functions/functions.jpg)
LESS - 命名空间和访问器
描述
命名空间用于将混合宏分组到一个通用名称下。使用命名空间,您可以避免名称冲突并将一组混合宏封装在外部。
示例
以下示例演示了在 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 Scope](/less/images/less_namespaces_accessors/namespaces_accessors.jpg)
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 Scope](/less/images/less_scope/scope.jpg)
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 Comments](/less/images/less_comments/comments.jpg)
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 "https://tutorialspoint.com/less/myfile.less"; .myclass2 { color: #FF0000; }
将从路径https://tutorialspoint.com/less/myfile.less导入到style.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 Importing](/less/images/less_importing/importing.jpg)
LESS - 变量
在本章中,我们将讨论 LESS 中的变量。LESS 允许使用@符号定义变量。变量赋值使用冒号(:)完成。
下表详细演示了 LESS变量的使用。
序号 | 变量用法和描述 |
---|---|
1 | 概述
通过使用变量可以避免多次重复相同的值。 |
2 | 变量插值
变量也可以用于其他地方,例如选择器名称、属性名称、URL和@import语句。 |
3 | 变量名称
我们可以使用包含值的变量名称定义变量。 |
4 | 延迟加载
在延迟加载中,即使变量未被使用,也可以使用它们。 |
5 | 默认变量
默认变量具有仅在变量未设置时才设置变量的功能。此功能不是必需的,因为可以通过稍后定义变量来轻松覆盖变量。 |
LESS - 扩展
扩展是 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 文件,将显示以下输出。
![Less Extend](/less/images/less-extend/less-extend-output.jpg)
扩展语法
扩展放置在规则集中或附加到选择器上。它类似于包含一个或多个类别的伪类,这些类别用逗号分隔。可以使用可选关键字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 Extend](/less/images/less-extend/less-extend-output1.jpg)
下表列出了您可以在 LESS 中使用的所有类型的扩展语法:
序号 | 类型和描述 |
---|---|
1 | 附加到选择器的扩展
扩展连接到一个选择器,看起来类似于具有选择器作为参数的伪类。 |
2 | 规则集内的扩展
&:extend(selector)语法可以放在规则集的主体内部。 |
3 | 扩展嵌套选择器
嵌套选择器使用extend选择器进行匹配。 |
4 | 使用扩展进行精确匹配
默认情况下,extend会在选择器之间查找完全匹配。 |
5 | 第 n 个表达式
第 n 个表达式的形式在扩展中很重要,否则它会将选择器视为不同的。 |
6 | 扩展“all”
当在extend参数的最后识别到关键字all时,LESS 会将该选择器匹配为另一个选择器的一部分。 |
7 | 使用扩展进行选择器插值
extend可以连接到插值选择器。 |
8 | @media 中的范围/扩展
扩展仅匹配存在于同一媒体声明中的选择器。 |
9 | 重复检测
它无法检测选择器的重复。 |
以下是扩展的用例类型
序号 | 类型和描述 |
---|---|
1 | 经典用例
经典用例用于避免在 LESS 中添加基类。 |
2 | 减小 CSS 大小
扩展用于将选择器移动到您要使用的属性尽可能远的位置;这有助于减少生成的 css 代码。 |
3 | 组合样式/更高级的混合
使用扩展,我们可以将特定选择器的相同样式组合到其他选择器中。 |
LESS - 混合
混合类似于编程语言中的函数。混合是一组 CSS 属性,允许您将一个类的属性用于另一个类,并将类名包含在其属性中。在 LESS 中,您可以像使用 CSS 样式一样声明混合,使用类或 ID 选择器。它可以存储多个值,并且可以在需要时在代码中重复使用。
下表详细演示了 LESS 混合的使用。
序号 | 混合用法和描述 |
---|---|
1 | 不输出混合
可以通过简单地在混合后面放置括号来使混合在输出中消失。 |
2 | 混合中的选择器
混合不仅可以包含属性,还可以包含选择器。 |
3 | 命名空间
命名空间用于将混合分组到一个通用名称下。 |
4 | 受保护的命名空间
当将保护应用于命名空间时,仅当保护条件返回 true 时才使用由其定义的混合。 |
5 | !important 关键字
!important关键字用于覆盖特定属性。 |
示例
以下示例演示了在 LESS 文件中使用混合:
<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 文件,将显示以下输出。
![LESS Mixins](/less/images/less_mixins/less_mixins.jpg)
调用混合时,括号是可选的。在上面的示例中,.p1();和.p1;两个语句都执行相同操作。
LESS - 参数化混合
描述
参数化混合使用一个或多个参数,通过获取参数及其属性来扩展 LESS 的功能,以便在混合到另一个块时自定义混合输出。
例如,考虑一个简单的 LESS 代码片段:
.border(@width; @style; @color) { border: @width @style @color; } .myheader { .border(2px; dashed; green); }
这里我们使用参数化混合作为.border,它有三个参数 - 宽度、样式和颜色。使用这些参数,您可以使用传递的参数值自定义混合输出。
下表描述了不同类型的参数化混合及其描述。
序号 | 类型和描述 |
---|---|
1 | 具有多个参数的混合
参数可以使用逗号或分号分隔。 |
2 | 命名参数
混合通过使用参数名称而不是位置来提供参数值。 |
3 | @arguments 变量
当调用混合时,@arguments包含所有传递的参数。 |
4 | 高级参数和@rest变量
混合通过使用....获取可变数量的参数。 |
5 | 模式匹配
通过向混合传递参数来更改混合的行为。 |
LESS - 混合作为函数
在本章中,我们将了解混合作为函数的重要性。像函数一样,混合可以嵌套,可以接受参数,也可以返回值。
下表详细演示了混合作为函数的使用。
序号 | 混合用法和描述 |
---|---|
1 | 混合范围
混合包含变量;这些变量可以在调用方的范围内使用并且是可见的。 |
2 | 混合和返回值
混合类似于函数,在混合中定义的变量将充当返回值。 |
3 | 另一个混合中的混合
每当在另一个混合中定义混合时,它也可以用作返回值。 |
LESS - 将规则集传递给混合
描述
分离的规则集包含规则集,例如属性、嵌套规则集、变量声明、混合等。它存储在一个变量中并包含在另一个结构中;规则集的所有属性都复制到该结构中。
示例
以下示例显示了如何在 LESS 文件中将规则集传递给混合:
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 文件,将显示以下输出。
![Less passing ruleset to mixin](/less/images/less-passing-rulesets-to-mixins/less-passing-rulesets-to-mixins-output1.jpg)
范围
分离规则集中的所有变量和混合在规则集被调用或定义的任何地方都可用。否则,调用方和定义范围默认情况下都可用。当两个范围都包含相同的混合或变量时,声明范围优先。分离规则集主体在声明范围内定义。在分离规则集从一个变量复制到另一个变量后,它不会更改其范围。
下表列出了所有类型的范围:
序号 | 类型和描述 |
---|---|
1 | 定义和调用方范围可见性
变量和混合在分离的规则集中定义。 |
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文件。
import_dir.less
.myline { font-size: 20px; }
现在,创建style.less文件。
style.less
@import "https://tutorialspoint.com/less/import_dir.less"; .myline { color:#FF0000; }
import_dir.less文件将从路径https://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 文件,将显示以下输出。
![Import Directives](/less/images/less_import_directives/less_import_directive.jpg)
LESS - 导入选项
在本章中,我们将了解导入选项在 LESS 中的重要性。LESS 提供@import语句,允许样式表导入 LESS 和 CSS 样式表。
下表列出了将在导入语句中实现的导入指令。
序号 | 导入选项和描述 |
---|---|
1 | 引用
它仅将 LESS 文件用作引用,不会输出它。 |
2 | 内联
它使您能够将 CSS 复制到输出中,而无需进行处理。 |
3 | less
它将把导入的文件视为常规 LESS 文件,无论文件扩展名是什么。 |
4 | css
它将把导入的文件视为常规 CSS 文件,无论文件扩展名是什么。 |
5 | once
它只导入文件一次。 |
6 | multiple
它将多次导入文件。 |
7 | optional
即使找不到要导入的文件,它也会继续编译。 |
在@import语句中允许使用多个关键字,但是您必须使用逗号分隔关键字。
例如:
@import (less, optional) "custom.css";
LESS - 混合保护
描述
如果要匹配简单值或表达式上的参数数量,则可以使用保护。它与混合声明相关联,并包含附加到混合的条件。每个混合将有一个或多个用逗号分隔的保护;保护必须括在括号内。LESS 使用受保护的混合而不是if/else语句,并执行计算以指定匹配的混合。
下表描述了不同类型的混合保护及其描述。
序号 | 类型和描述 |
---|---|
1 | 保护比较运算符
您可以使用比较运算符(=)来比较数字、字符串、标识符等。 |
2 | 保护逻辑运算符
您可以使用and关键字来处理保护的逻辑运算符。 |
3 | 类型检查函数
它包含内置函数以确定匹配混合的值类型。 |
4 | 条件混合
LESS 使用default函数将混合与其他混合匹配进行匹配。 |
示例
以下示例演示了在 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 文件,将显示以下输出。
![Mixin Guards](/less/images/less_mixin_guards/less_mixin_guard.jpg)
LESS - CSS 保护
描述
保护用于匹配表达式上的简单值或多个参数。它应用于 CSS 选择器。它是声明 mixin 并立即调用的语法。为了成功地引入if类型的语句;将其与特性&结合使用,它允许你组合多个保护。
示例
以下示例演示了在 LESS 文件中使用css保护的用法。
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 css guard](/less/images/less-css-guard/less-css-guard-output.jpg)
LESS - 循环
在本章中,我们将了解 LESS 中循环的工作原理。循环语句允许我们多次执行一个语句或一组语句。当递归 mixin 与保护表达式和模式匹配结合时,可以创建各种迭代/循环结构。
示例
以下示例演示了在 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 css guard](/less/images/less-loops/less-loops-output.jpg)
LESS - 合并
描述
LESS 中的此功能允许使用单个属性将值添加到来自多个属性的逗号或空格分隔列表中。它可以用于背景和转换属性。
下表描述了合并功能支持的两种类型的函数。
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文件。
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 文件,将显示以下输出。
![Less Parent Selector](/less/images/less-parent-selector/less-parent-selector-output1.jpg)
父选择器运算符有很多用途,例如,当您需要以与默认方式不同的方式组合嵌套规则的选择器时。&的另一个典型用法是重复生成类名。有关更多信息,请点击此处。
LESS - 杂项函数
杂项函数包含一组不同类型的函数。
下表列出了所有类型的杂项函数。
序号 | 函数 & 描述 |
---|---|
1 | color
它是一个表示颜色的字符串。 |
2 | image - size
它用于检查文件中图像的尺寸。 |
3 | image - width
它检查文件中图像的宽度。 |
4 | image - height
它检查文件中图像的高度。 |
5 | convert
将一个数字从一个单位转换为另一个单位。 |
6 | data - uri
Data uri 是统一资源标识符 (URI) 模式,它在网页上内联获取资源。 |
7 | default
Default 函数仅在它在保护条件内可用且与任何其他 mixin 不匹配时返回 true。 |
8 | unit
Default 函数仅在它在保护条件内可用且与任何其他 mixin 不匹配时返回 true |
9 | get - unit
get - unit 函数返回其单位,其中参数存在于数字和单位中。 |
10 | svg - gradient
svg-gradient 是一种从一种颜色过渡到另一种颜色的渐变。它可以向同一元素添加多种颜色。 |
LESS - 字符串函数
描述
Less 支持如下所示的一些字符串函数。
- escape
- e
- % format
- replace
下表描述了上述字符串函数及其描述。
序号 | 类型和描述 | 示例 |
---|---|---|
1 | Escape 它通过对特殊字符使用 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 它用于替换字符串中的文本。它使用一些参数:
|
replace("Welcome, val?", "val\?", "to Tutorialspoint!"); 它替换字符串为: "Welcome, to Tutorialspoint!" |
LESS - 列表函数
描述
LESS 包含列表函数,这些函数用于指定列表的长度和列表中值的位。置
下表列出了 LESS 中使用的列表函数。
LESS - 数学函数
描述
数学函数包括用于执行数值运算的方法,例如舍入、平方根、幂值、模数、百分比等。
下表显示了 LESS 中使用的数学函数。
序号 | 函数 & 描述 | 示例 |
---|---|---|
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 - 类型函数
在本章中,我们将了解类型函数在 LESS 中的重要性。它们用于确定值的类型。
下表显示了 LESS 中使用的类型函数。
序号 | 类型函数 & 描述 | 示例 |
---|---|---|
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 支持如下表所示的一些颜色定义函数。
序号 | 函数 & 描述 | 示例 |
---|---|---|
1 | rgb 它根据红色、绿色和蓝色值创建颜色。它具有以下参数:
|
rgb(220,20,60) 它使用 rgb 值转换颜色,如下所示: #dc143c |
2 | rgba 它根据红色、绿色、蓝色和 alpha 值确定颜色。它具有以下参数:
|
rgba(220,20,60, 0.5) 它使用 rgba 值转换颜色对象,如下所示: rgba(220, 20, 60, 0.5) |
3 | argb 它定义颜色以#AARRGGBB格式的十六进制表示形式。它使用以下参数:
|
argb(rgba(176,23,31,0.5)) 它返回 argb 颜色,如下所示: #80b0171f |
4 | hsl 它根据色相、饱和度和亮度值生成颜色。它具有以下参数:
|
hsl(120,100%, 50%) 它使用 HSL 值返回颜色对象,如下所示: #00ff00 |
5 | hsla 它根据色相、饱和度、亮度和 alpha 值生成颜色。它具有以下参数:
|
hsla(0,100%,50%,0.5) 它使用 HSLA 值指定颜色对象,如下所示: rgba(255, 0, 0, 0.5); |
6 | hsv 它根据色相、饱和度和值生成颜色。它包含以下参数:
|
hsv(80,90%,70%) 它将颜色对象转换为 hsv 值,如下所示: #7db312 |
7 | hsva 它根据色相、饱和度、值和 alpha 值生成颜色。它使用以下参数:
|
hsva(80,90%,70%,0.6) 它使用 hsva 值指定颜色对象,如下所示: rgba(125, 179, 18, 0.6) |
LESS - 颜色通道函数
在本章中,我们将了解颜色通道函数在 LESS 中的重要性。LESS 支持一些内置函数,这些函数设置有关通道的值。通道根据颜色定义设置值。HSL 颜色具有色相、饱和度和亮度通道,RGB 颜色具有红色、绿色和蓝色通道。下表列出了所有颜色通道函数:
序号 | 函数 & 描述 | 示例 |
---|---|---|
1 | 色相 在 HSL 颜色空间中,色相通道是从颜色对象中提取的。 |
background: hue(hsl(75, 90%, 30%)); 它编译成如下所示的 CSS: background: 75; |
2 | 饱和度 在 HSL 颜色空间中,饱和度通道是从颜色对象中提取的。 |
background: saturation(hsl(75, 90%, 30%)); 它编译成如下所示的 CSS: background: 90%; |
3 | 亮度 在 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 | 红色 红色通道是从颜色对象中提取的。 |
background: red(rgb(5, 15, 25)); 它编译成如下所示的 CSS: background: 5; |
8 | 绿色 绿色通道是从颜色对象中提取的。 |
background: green(rgb(5, 15, 25)); 它编译成如下所示的 CSS: background: 15; |
9 | 蓝色 蓝色通道是从颜色对象中提取的。 |
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 luma 值是从颜色对象中计算得出的。 |
background: luma(rgb(50, 250, 150)); 它编译成如下所示的 CSS: background: 71.2513323%; |
12 | 亮度 luma 值是在不进行伽马校正的情况下计算得出的。 |
background: luminance(rgb(50, 250, 150)); 它编译成如下所示的 CSS: background: 78.53333333%; |
LESS - 颜色操作
描述
LESS 提供了许多有用的操作函数,以不同的方式更改和操作颜色,并以相同的单位获取参数。LESS 支持一些颜色操作函数,如下表所示:
序号 | 指令和描述 |
---|---|
1 | 饱和
它改变元素中颜色的强度或饱和度。 |
2 | 去饱和
它降低元素中颜色的强度或饱和度。 |
3 | 浅色
它增加元素中颜色的亮度。 |
4 | 变暗
它改变元素中颜色的强度或饱和度。 |
5 | 淡入
它增加了所选元素的不透明度。 |
6 | 淡出
它降低了所选元素的不透明度。 |
7 | 淡化
它用于为所选元素设置颜色的透明度。 |
8 | 旋转
它用于旋转所选元素的颜色角度。 |
9 | 混合
它混合两种颜色以及不透明度。 |
10 | 色调
当您降低颜色的比例时,它将颜色与白色混合。 |
11 | 阴影
当您降低颜色的比例时,它将颜色与黑色混合。 |
12 | 灰度
它丢弃所选元素中颜色的饱和度。 |
13 | 对比度
它设置元素中颜色的对比度。 |
LESS - 颜色混合函数
在本章中,我们将了解 LESS 中的颜色混合函数。这些类似于 Photoshop、Fireworks 或 GIMP 等图像编辑器中使用的操作,这些操作将您的 CSS 颜色与您的图像匹配。
下表显示了 LESS 中使用的颜色混合函数。
序号 | 函数 & 描述 |
---|---|
1 | 乘法
它将两种颜色相乘并返回结果颜色。 |
2 | 屏幕
它获取两种颜色并返回更亮的颜色。它与乘法函数相反。 |
3 | 叠加
它通过结合乘法和屏幕的效果生成结果。 |
4 | 柔光
它的工作原理类似于叠加,但它只使用颜色的一部分,这会柔和地突出显示其他颜色。 |
5 | 强光
它的工作原理类似于叠加,但颜色的作用相反。 |
6 | 差异
它从第一个输入颜色中减去第二个输入颜色。 |
7 | 排除
它的工作原理类似于差异函数,但对比度较低。 |
8 | 平均
它基于每个通道(RGB)计算两个输入颜色的平均值。 |
9 | 否定
它与差异函数相反,它从第二个颜色中减去第一个颜色。 |
LESS - 命令行用法
使用命令行,我们可以将.less文件编译成.css。
全局安装 lessc
以下命令用于使用 npm(节点包管理器)安装 lessc,以使 lessc 在全局范围内可用。
npm install less -g
您也可以在包名称后添加特定版本。例如npm install [email protected] -g
安装用于节点开发
以下命令用于在您的项目文件夹中安装最新版本的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
选项
下表列出了命令行用法中使用的选项:
序号 | 选项和描述 | 命令 |
---|---|---|
1 | 帮助 显示帮助消息以及可用的选项。 |
lessc -help lessc -h |
2 | 包含路径 它包含库中可用的路径。这些路径可以在 Less 文件中简单且相对地引用。Windows 中的路径由冒号 (:) 或分号 (;) 分隔。 |
lessc --include-path = PATH1;PATH2 |
3 | Makefile 它生成一个 makefile 导入依赖项列表作为输出到标准输出。 |
lessc -M lessc --depends |
4 | 无颜色 它禁用彩色输出。 |
lessc --no-color |
5 | 无 IE 兼容性 它禁用 IE 兼容性检查。 |
lessc --no-ie-compat |
6 | 禁用 Javascript 它禁用 less 文件中的 javascript。 |
lessc --no-js |
7 | Lint 它检查语法并在没有任何输出的情况下报告错误。 |
lessc --lint lessc -l |
8 | 静默 它强制停止显示错误消息。 |
lessc --silent lessc -s |
9 | 严格导入 它强制评估导入。 |
lessc --strict-imports |
10 | 允许从不安全的 HTTPS 主机导入 它从不安全的 HTTPS 主机导入。 |
lessc --insecure |
11 | 版本 它显示版本号并退出。 |
lessc -version lessc -v |
12 | 压缩 它有助于删除空格并压缩输出。 |
lessc -x lessc --compress |
13 | 源映射输出文件名 它在 less 中生成 sourcemap。如果定义了 sourcemap 选项但没有文件名,则它将使用扩展名 map 并将 Less 文件名作为源。 |
lessc --source-map lessc -source-map = file.map |
14 | 源映射根路径 指定根路径,并应将其添加到 sourcemap 中的 Less 文件路径以及您输出 css 中指定的映射文件。 |
lessc --source-map-rootpath = dev-files/ |
15 | 指定一个路径,该路径必须从输出路径中删除。Basepath 与 rootpath 选项相反。 源映射基本路径 |
lessc --source-map-basepath = less-files/ |
16 | 源映射 Less 内联 所有 Less 文件都应包含在 sourcemap 中。 |
lessc --source-map-less-inline |
17 | 源映射映射内联 它指定在输出 css 中映射文件应为内联。 |
lessc --source-map-map-inline |
18 | 源映射 URL 允许 URL 覆盖 css 中映射文件中的点。 |
lessc --source-map-url = ../my-map.json |
19 | 根路径 它设置相对导入和 url 中 URL 重写的路径。 |
lessc -rp=resources/ lessc --rootpath=resources/ |
20 | 相对 URL 在导入的文件中,URL 将被重写,以便 URL 始终相对于基本文件。 |
lessc -ru lessc --relative-urls |
21 | 严格数学 它处理 css 中的所有 Math 函数。默认情况下,它是关闭的。 |
lessc -sm = on lessc --strict-math = on |
22 | 严格单位 它允许混合单位。 |
lessc -su = on lessc --strict-units = on |
23 | 全局变量 定义一个变量,该变量可以被文件引用。 |
lessc --global-var = "background = green" |
24 | 修改变量 这与全局变量选项不同;它将声明移动到 less 文件的末尾。 |
lessc --modify-var = "background = green" |
25 | URL 参数 要继续到每个 URL,允许指定一个参数。 |
lessc --url-args = "arg736357" |
26 | 行号 生成内联源映射。 |
lessc --line-numbers = comments lessc --line-numbers = mediaquery lessc --line-numbers = all |
27 | 插件 它加载插件。 |
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是重要性级别。
数据属性不能用驼峰命名法编写;链接标签选项表示为时间选项。
具有非字符串值的数据属性应为 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 中可用的插件。
后处理器/功能插件
序号 | 插件 & 描述 |
---|---|
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 转换为 data uri。 |
10 | npm-import
它从 Less 的 npm 包中导入。 |
11 | pleeease
它用于后处理 Less。 |
12 | rtl
LESS 从 ltr(从左到右)反转为 rtl(从右到左)。 |
框架/库导入器
序号 | 导入器 & 描述 |
---|---|
1 | Bootstrap
在自定义 LESS 代码之前导入 Bootstrap LESS 代码。 |
2 | Bower Resolve
从 Bower 包中导入 LESS 文件。 |
3 | Cardinal CSS for less.js
在自定义 LESS 代码之前,导入 Cardinal 的 LESS 代码。 |
4 | Flexbox Grid
最常导入的框架或库导入器。 |
5 | Flexible Grid System
它导入 Flexible Grid System。 |
6 | Ionic
它导入 Ionic 框架。 |
7 | Lesshat
它导入 Lesshat 混合。 |
8 | Skeleton
它导入 Skeleton Less 代码。 |
函数库
序号 | 导入器 & 描述 |
---|---|
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。您可以通过将其读入字符串并设置主文件的 filename 字段来显示文件。
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 编译器:-
支持 Less 的在线 Web IDE/游乐场
以下是支持 Less 的可用在线 Web IDE。
序号 | 在线 Web IDE & 描述 |
---|---|
1 | CSSDeck Labs
这是一个可以轻松创建涉及 HTML、CSS、JS 代码的测试用例的地方。 |
2 | CodePen 这是前端 Web 的游乐场。 |
3 | Fiddle Salad
这是一个可以在环境中添加现有代码的地方。 |
4 | JS Bin
这有助于 Javascript 和 CSS 代码。 |
5 | jsFiddle
这是一个在线 Web 编辑器。 |
LESS - GUI
在本章中,我们将了解 LESS 的 GUI。您可以为您的平台使用不同的 LESS 工具。有关 命令行用法和工具,请单击此 链接。
下表列出了支持跨平台的 GUI 编译器。
序号 | 工具 & 描述 |
---|---|
1 | Crunch 2!
它支持跨平台,如 Windows、Mac 和 Linux。它提供带有集成编译的编辑器。 |
2 | Mixture 它是一个由设计师和开发人员使用的快速原型设计和静态站点生成工具。它快速、高效,并且可以很好地与您的编辑器配合使用。它汇集了一系列很棒的工具和最佳实践。 |
3 | SimpLESS
它是一个极简的 LESS 编译器。它提供拖放和编译功能。SimpLESS 支持使用 prefixr 为您的 CSS 添加前缀,这是 SimpLESS 的独特功能。它构建在 Titanium 平台上。 |
4 | Koala
它用于编译 LESS、SASS 和 CoffeeScript。它提供诸如编译错误通知支持和编译选项支持等功能。 |
下表列出了支持 Windows 平台的 GUI 编译器。
序号 | 工具 & 描述 |
---|---|
1 | Prepros
它是一个编译 LESS、SASS、Compass、Stylus、Jade 等的工具。 |
2 | WinLess
最初它是 LESS.app 的克隆,它有几个设置并采用更完整的功能方法。它支持从命令行参数开始。 |
下表列出了支持 OS X 平台的 GUI 编译器。
序号 | 工具 & 描述 |
---|---|
1 | CodeKit
它是 LESS.app 的继任者,并且支持 LESS 以及许多其他处理语言,如 SASS、Jade、Markdown 等。 |
2 | LiveReload
它可以立即编辑 CSS 并更改图像。SASS、LESS、CoffeeScript 等都可以很好地工作。 |
下表列出了支持 OS X 平台的 GUI 编译器。
序号 | 工具 & 描述 |
---|---|
1 | Plessc
它是 lessc 的 GUI 前端。它具有日志查看器、自动编译、使用所选编辑器打开 LESS 文件和源映射支持等功能。 |
LESS - 编辑器和插件
在本节中,我们将了解编辑器和插件在 LESS 中的重要性。编辑器是一个允许用户编辑文本的系统或程序。插件是一段用于扩展网站功能的软件。
现在让我们讨论 LESS 的编辑器和 IDE。
序号 | 编辑器和 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 集成、打开文档选项卡和可扩展的 bundle 系统。 |
5 | Vim
Vim bundle 添加了诸如缩进、突出显示和自动完成等功能,用于动态样式表语言 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
它是一个轻量级、强大且开源的代码编辑器,可帮助 Web 设计师和前端开发人员。 |
9 | CodeLobster
它是一个便携式集成开发环境 (IDE),主要用于 PHP。它还支持 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 Tools
这是一个用于 HTML5、CSS3、JavaScript 等的现代 Web 编辑器。借助它,您可以从符合现代标准的编辑器中编辑、预览、验证、发布和管理项目。 |
Sublime Text 2 & 3
以下表列出了Sublime Text为 LESS 提供的不同选项。
序号 | 选项和描述 |
---|---|
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 插件,如下表所示。
序号 | 插件 & 描述 |
---|---|
1 | Eclipse Less 插件
通过扩展 Eclipse IDE,此插件提供了编辑和编译 LESS 样式表的有用功能。 |
2 | Transpiler 插件
此 Eclipse 插件会自动转换您的文件,例如 LESS、SASS、CoffeeScript 等。 |
Visual Studio
Visual Studio有以下几种 LESS 选项。
序号 | 选项和描述 |
---|---|
1 | CSS Is Less
此扩展使 LESS 文件可以使用 CSS 语言服务打开。 |
2 | Web Essentials 2012
此扩展使您可以更轻松地执行常见任务,并为 Web 开发人员在 Visual Studio 中添加有用的功能。 |
3 | Web Essentials 2013
它通过许多新功能扩展了 Visual Studio,这些功能并非特定于某种语言或编辑器。 |
4 | Web Tools 2013
这有助于您执行涉及 ASP.NET 的开发任务。 |
Dreamweaver
使用Dreamweaver时,需要考虑以下几点。
它是一个 Adobe 应用程序,Web 设计师和开发人员使用它来创建应用程序和网站。
- 它能够跨多个平台工作,包括浏览器、设备和平板电脑。
Web 设计师使用 Dreamweaver 创建网站原型。
DMXzone Less CSS Compiler使所有 LESS CSS 功能直接在 Dreamweaver 中可用。
Notepad++ 6.x
使用Notepad++时,需要考虑以下几点。
Notepad++ 是一个免费的文本编辑器和源代码编辑器,支持选项卡式编辑,即在一个窗口中处理多个打开的文件。
用于 Notepad++ 的 LESS 是一个 xml 文件,它为 .less 文件提供语法高亮显示或着色。要获取更多信息,请单击此链接。
要安装 Notepad++,请单击此链接。
LESS - 第三方编译器
Node.js 编译器
以下是用于 LESS 的 Node.js 编译器。
grunt-contrib-less
Grunt 是一个 Node 任务运行器。它会在每次您对 LESS 文件进行更改并提交时编译您的样式表。
assemble-less
assemble-less 是一个功能强大的 Grunt 插件,用于将 LESS 文件编译为 CSS。less 任务提取 JSON 和 Lo-dash(underscore)模板以定义 LESS 捆绑包、UI 组件、压缩样式表或主题。
gulp-less
它是 Gulp 的 LESS 插件。gulp-minify-css用于最小化 CSS。gulp-sourcemaps用于生成 sourcemaps 库。
RECESS
它是一个基于 LESS 的开源工具,可帮助优化 CSS 代码。它使 CSS 代码保持无错误、整洁和易于管理。
autoless
它是一个.less文件监视器。它包含依赖项跟踪和跨平台通知。
Connect 中间件 for Less.js
它用于允许处理 LESS 文件的 connect JS 框架。它在请求时编译源文件并缓存编译后的数据以供下次请求使用。
其他技术
以下是一些其他可帮助您编译 LESS 代码的技术。
Wro4j Runner CLI
您可以下载wro4j-runner.jar,并使用以下命令将 LESS 代码编译为 CSS。
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]
或
lessc input.less [output.css] [-compress]
您可以访问以下链接以了解有关Less.js for windows的更多信息。
dotless
以下是在 Windows 上运行 dotless 的命令行编译器。
dotless.Compiler.exe [-switches] <inputfile> [outputfile]
您可以访问以下链接以了解有关dotless的更多信息。
LESS - 框架
UI/主题框架和组件
LESS 支持以下表中列出的一些 UI/主题框架。
序号 | 框架及描述 |
---|---|
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 | 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 的 CSS 框架。 |
18 | prelude
它是一个使用 LESS 的前端 CSS 框架。 |
19 | Schema
它是一个轻量级且响应式的框架,有助于构建复杂的网站。 |
20 | Semantic UI
它是一个用户界面框架,使用 HTML 创建响应式布局。 |
21 | UIkit
它是一个前端框架,包含 HTML、CSS 和 JS 组件,易于使用和开发 Web 应用程序。 |
22 | ngBoilerplate 它是一个基于 Grunt 的构建系统,用于 AngularJS 项目。 |
23 | less-rail
它是一种动态样式表语言,使用 Less.js 用于 Rails 项目。 |
24 | Wee
它是一个前端框架,包含 HTML、CSS 和 JavaScript Bootstrap 组件,用于开发响应式 Web 项目。 |
网格系统
LESS 支持以下表中列出的网格系统框架。
序号 | 框架及描述 |
---|---|
1 | Flexible Grid System
它是一个 CSS 框架,以灵活的方式创建 Web 项目。 |
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 库:
序号 | 框架及描述 |
---|---|
1 | 3L
它为 LESS 预处理器提供了最新的 CSS3 功能。 |
2 | animate
这是一个用于项目中使用的浏览器动画的库。 |
3 | Clearless
它使用可重用的 LESS mixin,而不会破坏样式并在样式表中创建过大的尺寸。 |
4 | Css3LessPlease
它将 css3please.com 转换为 LESS mixin,并且当您运行 CSS 时,元素将立即发生更改。 |
5 | CssEffects
它提供了作为 LESS mixin 编写的 CSS 样式效果。 |
6 | Cssowl
这是一个 mixin 库,支持 LESS、SASS 和 Stylus。 |
7 | cube.less
它是一个仅使用 CSS 创建的 3D 动画立方体。 |
8 | tRRtoolbelt.less
这是一个库,提供 mixin 和函数来对 LESS 文件执行操作。 |
9 | est
它基于 LESS,允许更有效地编写 LESS 代码。 |
10 | Hexagon
它创建具有大小和颜色的 CSS 六边形。 |
11 | homeless
这是一个包含 Less.js 有用函数的 mixin 库。 |
12 | LESS 元素 它是一组用于 LESS 预处理器的 mixin。 |
13 | LESS Hat
这是一个 mixin 库,有助于为所有浏览器导出 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 和跨浏览器 mixin 为 LESS 提供更多功能。 |
21 | more-or-less
它为 less.js 提供强大的 mixin。 |
22 | normalize.less
它使用 LESS 提供标准化的 CSS。 |
23 | Oban
它是一组 mixin,可以加快 Web 应用程序的开发过程。 |
24 | Preboot
它是一组 LESS 服务,使用 mixin 和变量编写更好的 CSS,并从 Bootstrap 中形成。 |
25 | prelude-mixins
它是一个 LESS mixin 库。 |
26 | Shape.LESS
它提供许多 mixin 用于指定应用程序的各种形状。 |