Less
介绍
1、定义:
Less
是一种CSS
扩展语言,也被称为CSS
预处理器,为CSS
拓展了变量、Mixin、函数等特性,使CSS
更易维护和扩展,使我们可以像写JS
一样编写CSS
。
随着我们变成业务的复杂程度提升,原生的编程语言已经渐渐不能满足我们的需求。预处理语言的出现正是针对某些不易维护或繁琐的语言进行预处理,拓展该语言的语法功能。
什么是CSS预处理器
CSS预处理器是一种脚本语言,是CSS的扩展,使用该脚本语言编写的文件经过编译后输出标准的CSS,然后web浏览器就可以读取解析它。Less看起来与CSS非常相似,但是它提供了许多扩展功能,比如变量、函数、混合和操作符等,这些功能可以帮助你编写动态CSS。Less和SASS都是常用的CSS预处理器,Less文件和Sass文件经过编译后输出标准的CSS,可以被web浏览器读取解析。
2、使用
Less
是用JavaScript
编写的,需要Node.js
或web浏览器
才能运行。在项目中包含Less.js
,可以实时编译所有导入.less
样式表,但是这样做性能比较差,通常不推荐。
本教程使用 Node.js
编译Less
文件,Node.js
功能强大使用方便,已经成为前端开发中的必备工具。
3、Less 历史
Less
开始是用Ruby
编写的,但后来的版本改为Javascript
编写,并且不推荐使用Ruby
。Less
最初由Alexis Sellier
于2009年开发。
4、Less 特性
- 与CSS相比,Less的代码干净、紧凑、可读性好,项目的文件组织更好。
- Less支持多种浏览器。
- Less更快,更容易。
- Less是用JavaScript编写的,编译速度比其他css预处理器更快。
- Less提供了变量让维护更简单。
- Less提供了嵌套,让代码更短、更干净,更容易组织。
- Less让你编写可重用的样式代码。
- Less是CSS的扩展,兼容CSS,是CSS的超集。
- Less解决了CSS的代码冗余问题。
- Less提供@import指令,可以轻松导入外部文件,让你可以将复杂样式表文件拆分,更好地组织项目文件。
- Less为共享样式的组选择器提供了扩展方法,代码更清晰更有组织。
- Less提供了强大的合并属性。
5、对比
1.Sass
- 背景介绍
Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
其实现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。
Sass官网地址:http://sass-lang.com
- 安装
Sass是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以正常使用Sass。只是必须先安装Ruby,然后再安装Sass。
- 扩展名
.sass
或.scss
- 变量
sass变量必须是以$开头的,然后变量和值之间使用冒号(:)隔开,和css属性是一样的
2.Less
- 背景介绍
2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,在很多流行的框架和工具中已经能经常看到LESS的身影了(例如Twitter的Bootstrap框架就使用了LESS)。
根据维基百科上的介绍,其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让CSS现有的用户使用起来更佳方便,Alexis开发了LESS并提供了类似CSS的书写功能。
LESS的官网:http://lesscss.org
- 安装
<!-- Use with the browser: -->
<script src="//cdn.jsdelivr.net/npm/less" ></script>
<!-- Use with Node.js: -->
$ npm install less
- 扩展名
.less
- 变量
Less css中变量都是用@开头的,其余与sass都是一样的。
3.Stylus
- 背景介绍
Stylus,2010年产生,来自于Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
Stylus官网:http://learnboost.github.com/stylus
- 安装
$ npm install stylus
- 扩展名
.styl
- 变量
stylus对变量是没有任何设定的,可以是以$开头,或者任何的字符,而且与变量之间可以用冒号,空格隔开,但是在stylus中不能用@开头。
基础知识
1、环境搭建
环境搭建分为2个步骤
- 安装nodejs
linkhttps://www.cnblogs.com/li150dan/p/10451772.html
- 安装Less
npm install -g less
//验证
> lessc -v
lessc 3.9.0 (Less Compiler) [JavaScript]
2、一个简单的例子
<!-- html -->
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
<h2>一个简单Less例子</h2>
<h3>Hello 奇客谷教程</h3>
</body>
</html>
//less
@primarycolor: #FF7F50;
@color: #800080;
h2 {
color: @primarycolor;
}
h3 {
color: @color;
}
现在使用less编译器编译less文件。命令行中,切换到文件所在目录,执行以下less编译命令:
lessc simple.less simple.css
使用浏览器打开simple.html文件即可。
3、注释
注释使代码清晰易懂。与CSS
一样,Less
支持单行注释和多行注释。
在Less
中,单行注释以双斜杠//
开头,不会出现在编译出的CSS
文件中;多行注释格式与css
相同:/* 注释内容 */
,多行注释会出现在编译出的CSS
文件中。
CSS
中,单行注释和多行注释都是/* 注释内容 */
的格式。
// 定义颜色
/*
定义颜色
$primary-color: 主色调
$color: 次色调
*/
@primarycolor: #FF7F50;
@color:#800080;
h2 {
color: @primarycolor;
}
h3 {
color: @color;
}
4、嵌套
嵌套可以让代码有层次结构,代码更清晰、简单。但过多嵌套也会让代码复杂性增加,难以维护,必须把握好度。
//css
p {
color: #232323;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
}
p .intro {
font-variant: small-caps;
font-size: 16px;
line-height: 24px;
}
p .highlight {
color: #00214D;
font-weight: bold;
}
//less
p {
color: #232323;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 21px;
.intro {
font-variant: small-caps;
font-size: 16px;
line-height: 24px;
}
.highlight {
color: #00214D;
font-weight: bold;
}
}
5、运算符
Less
支持加减乘除运算符,任何数字、颜色、变量都可以使用运算符计算值。
@fontSize: 10px;
.myclass {
font-size: @fontSize * 5;
color: pink;
}
// 输出
.myclass {
font-size: 50px;
color: pink;
}
Variables(变量)
1、定义:
使用@
符号来定义变量 ,在Less
中开头是@
则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写,从第二个开始,单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……,当然也是可是使用香肠命名法用下划线“_”来命名。如,box_main,border_bottom,……
2、使用:
在样式属性值中使用时,直接用@variable
即可调用变量;
在其他地方,包括选择器名称、属性名称、URL和@import语句使用时,变量必须以插值的形式使用
//例如:
@variable: 200px; //定义变量作为样式属性值使用
@classname: .nav_a; //变量值不可用中划线,此变量作为插值用于选择器名称
@{classname}{ //作为插值 必须加 {}
width: @variable; //作为属性值直接调用
}
//输出:
.nav_a {
width: 200px;
}
3、变量特点:
变量是懒加载的,不要求一定在使用之前声明。
4、在存在多个同名变量时,变量如何获取值?
和css规则类似,在同时定义一个变量两次时,会在使用变量的地方,从当前范围向上搜索,使用变量最后定义内的属性值。
@var: 0;
.class1 {
@var: 1;
.class {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
//编译输出:
.class1 .class {
three: 3;
}
.class {
one: 1;
}
5、变量的其它使用技巧:初始值
在定义变量时可以给变量赋一个初始值,后期在使用中通过重新定义或函数 来覆盖原本的初始值
Extend(继承)
Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.——官方定义
慕课解释:
1、Extend 是 Less 语法中的一个伪类,它可以继承所匹配的全部样式。
2、Extend 是为了解决样式表中重复的样式,这一点与其它语言中的继承功能相似。
3、Extend 主要用于复用重复的样式类,可附加在选择器上或放置到样式集中。
.a{
&:extend(.b); //这里的 & 为 父选择符,代表的 父选择符 .a 扩展 .b
font-size: 12px;
}
.b{
font-weight: bold;
}
//输出
.a {
font-size: 12px;
}
.b,
.a {
font-weight: bold; //这里 a 扩展也引用了 b 的样式
}
1、:extend()
语法
:extend()
可以附加到选择器后面,也可以放到样式规则中,它看起来就像是一个选择器的伪类,在使用的时候我们可以选择性的加上关键字all
<!--例如-->
.a:extend(.b){} <!--方法一:附加到选择器后-->
.a{
&:extend(.b) <!--方法二:写在样式规则中-->
}
2.:extend()
可直接附加在选择器上使用
每个选择器可以使用多个:extend()
语句,但是所使用的:extend()
语句必须放在选择器末尾,下面详细描述
- 在选择器之后
:extend()
:pre:hover:extend(div pre)。 - 选择器和
:extend()
之间允许有空格:pre:hover :extend(div pre)。 - 允许多个
:extend()
:pre:hover:extend(div pre):extend(.bucket tr)- 注意这是相同的pre:hover:extend(div pre, .bucket tr) - 这是不允许的:pre:hover:extend(div pre).nth-child(odd)。
:extend()
必须在选择器末尾。
如果规则集包含多个选择器,则它们中的任何一个选择器都可以具有extend关键字。
//在一个规则集中继承的多个选择器:
.a,
.b:extend(.bag),
.c:extend(.bucket) {
// 这里啊a,b,c 3个选择器都可以使用 :extend
}
3.:extend()
也可以放到样式集中使用,但注意在使用时需在前面加上&
符号
把:extend()
放到多个选择器共用的样式规则集中,是把样式继承到每个选择器的最佳选择。
<!--直接把: extend() 放到样式规则中-->
.a,.c,.d{
&:extend(.b);
}
.b{
font-size: 12rem;
}
<!--输出-->
.b,
.a,
.c,
.d {
font-size: 12rem;
}
优势:如果把:extend()
放在选择器后,那么需要单独对 .a , .c , .d单独处理,会增加代码量,后期维护也很繁琐
4.:extend()
嵌套选择器
将:extend()
直接放在选择器后,可以继承嵌套选择器样式规则
.my-table{
.my-tr{
font-size: 50px;
}
}
.mt-other-table :extend(.my-table .my-tr){}
5.:extend()
中选择符的精确匹配
Less中,关键字extend
里面的选择器必须与已定义的样式选择器严格一致,如.class .a{}
样式只能通过extend(.class .a)
继承,而不能是extend(.a)
,尽管这两者在CSS中并没太多区别。
唯一例外的是属性选择器中的 引号 ,Less
知道它们具有相同的含义并匹配它们。
.a.class,
.class.a,
.class>.a{
color: blue;
}
.test:extend(.class) {} // this will NOT match the any selectors above
编译下,命令行中报错了… 没有匹配到.class
$ lessc refer.less > refer.css
extend ' .class' has no matches
选择器前面的符号是很重要的, 虽然*.class{}
和.class{}
是一样的,但是在:extend(.class)
中无法匹配到 *.class
*.class {
color: blue;
}
.noStar:extend(.class) {} // 不会匹配到 *.class
多个伪类在:extend()
中的顺序也很重要,选择器link:hover:visited
和link:visited:hover
匹配相同的一组元素,但:extend()
将它们视为不同。
link:hover:visited {
color: blue;
}
.selector:extend(link:visited:hover) {} //此时无法匹配到link:hover:visited
6. 使用n
的选择器、使用属性筛选的选择器
- 1n+3和n+3相当,但
:extend()
不会匹配他们:
:nth-child(1n+3) {
color: blue;
}
.child:extend(n+3) {} // 无法匹配
- 在属性选择器中的引用类型无关紧要。以下所有都是相同的。
[title=identifier] {
color: blue;
}
[title='identifier'] {
color: blue;
}
[title="identifier"] {
color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
7. 继承中的all
关键字
当继承嵌套结构的样式时,如果想要同时继承嵌套结构内的样式,需要在样式名加上all
关键字。
//例如
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {}
//输出:
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
8. 选择器插值与:extend()
:extend()
不能将选择器与变量相匹配。如果选择器包含变量,:extend()
将忽略它;
//变量无法与选择器匹配:
@variable: .bucket; //定义变量
@{variable} { // 变量插值
color: blue;
}
.some-class:extend(.bucket) {} //没有做任何工作,此时无法匹配到 .selector
//输出:仅仅只输出了 .selector 的样式规则
.bucket {
color: blue;
}
但是,将:extend()
继承直接写在变量选择器后,可正常使用,将上例代码改为如下:
.bucket{
color: blue;
}
@variable: some-class; //此时有中划线,将 . 移至变量插值前,否则会报错
.@{variable}:extend(.bucket){} // 在变量选择器后使用 :extend ,正常编译
//正常编译:
.bucket,
.some-class {
color: blue;
}
9. 作用范围:extend()
在@media
中的使用
- 在
media
媒体声明中写入的:extend()
只匹配同一媒体声明中的选择器:
@media print {
.screenClass:extend(.selector) {} // extend inside media
.selector { // 这会被匹配到 - 以为和extend在同一个media内
color: black;
}
}
.selector { // 规则集在上一个样式中 - extend 将忽略这
color: red;
}
@media screen {
.selector { // r规则集在另一个样式中 - extend 将忽略这
color: blue;
}
}
//输出:
@media print {
.selector,
.screenClass { /* ruleset inside the same media was extended */
color: black;
}
}
.selector { /* ruleset on top of style sheet was ignored */
color: red;
}
@media screen {
.selector { /* ruleset inside another media was ignored */
color: blue;
}
}
- 在媒体声明中写入的
:extend()
,不匹配其嵌套声明中的选择器:
@media screen {
.screenClass:extend(.selector) {} // extend inside media
@media (min-width: 1023px) {
.selector { // css在media内部嵌套 - extend 将忽略它
color: blue;
}
}
}
//输出:
@media screen and (min-width: 1023px) {
.selector { /* ruleset inside another nested media was ignored */
color: blue;
}
}
- 顶级
:extend()
将匹配所有内容,包括嵌套媒体中的选择器
@media screen {
.selector { /* ruleset inside nested media - top level extend works */
color: blue;
}
@media (min-width: 1023px) {
.selector { /* ruleset inside nested media - top level extend works */
color: blue;
}
}
}
.topLevel:extend(.selector) {} /* 定层级 :extend 匹配所有 */
//输出:
@media screen {
.selector,
.topLevel { /* ruleset inside media was extended */
color: blue;
}
}
@media screen and (min-width: 1023px) {
.selector,
.topLevel { /* ruleset inside nested media was extended */
color: blue;
}
}
10. 重复检测 - Duplication Detection
在使用:extend()
时,less目前没有检测重复的 功能
.alert-info,
.widget {
/* declarations */
}
.alert:extend(.alert-info, .widget) {}
//输出:
.alert-info,
.widget,
.alert,
.alert {
/* declarations */
}
11. Tip
- 选择器可以包含多个伪类,但是
:extend()
必须位于末位。
div:hover:extend(span)
- 选择器和
:extend()
之间是允许有空格。
div :extend(span)
- 选择器可以多次继承。
.color {
color: red;
}
.bg-color {
background: green;
}
// 与 div:hover:extend(.color, .bg-color) 等效
div:hover:extend(.color):extend(.bg-color)
- 如果一个规则集包含多个选择器,其中任何一个选择器都可以具有
:extend()
。
.content:extend(.color), .image:extend(.bg-color) {
color: red
}
5.:extend()
可以匹配嵌套选择器。
div {
img {
width: 10px;
}
}
.class:extend(div img) {
hegiht: 20px;
}
6.:extend()
中所继承的选择器名称不能是变量,以下示例均为错误示范。
.content {
color: blue;
}
.class:extend(@{selector}) {} // 找不到匹配项
@selector: .content;
7.:extend()
并没有重复检测,请勿重复定义。比如以下代码中只用继承.success-info
或者span
即可,以下写法编译时并不会帮我们把重复的选择器删除掉。
.success-info,
span {
color: green;
}
.success:extend(.success-info, span) {}
12.Extend案例扩展
- 典型用例
典型的用例是避免在html添加基本选择器类别。
//例如
.animal {
background-color: black;
color: white;
}
//然后你想要一种重写background-color的class类,这时你有两个方法,第一种方法是:改变你的HTML,添加另一个选择器类bear
<a class="animal bear">Bear</a>
.animal {
background-color: black;
color: white;
}
.bear {
background-color: brown;
}
//第二种方法是:简化html同时使用less的 :extend,例如
<a class="bear">Bear</a>
.animal {
background-color: black;
color: white;
}
.bear {
&:extend(.animal);
background-color: brown;
}
- 减少css大小
mixin
将所有属性复制到一个选择器中,这会导致不必要的重复。因此,您可以使用:extend()
而不是mixin将选择器移到您希望使用的属性,这样会大大减少生成的css。
//当使用mixin时:
.my-inline-block() {
display: inline-block;
font-size: 0;
}
.thing1 {
.my-inline-block;
}
.thing2 {
.my-inline-block;
}
//输出:
.thing1 {
display: inline-block;
font-size: 0;
}
.thing2 {
display: inline-block;
font-size: 0;
}
//改写使用 :extend()
.my-inline-block {
display: inline-block;
font-size: 0;
}
.thing1 {
&:extend(.my-inline-block);
}
.thing2 {
&:extend(.my-inline-block);
}
//输出:
.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size: 0;
}
- 结合样式,更高级的混合
另一个用例是mixin的替代方案——因为mixin只能与简单的选择器一起使用,如果您在html上有两个不同的块,但是它们需要应用相同的样式到,那么您可以使用:extend()
来关联两个区域。
li.list > a {
// list styles
}
button.list-style {
&:extend(li.list > a); // use the same list styles
}
- 利用重复代码
通过继承我们可以创建出不同的基础样式,比如背景颜色、字体大小等:
.info-font {
font-size: 28px;
}
.content {
&:extend(.info-font)
}
这种方法帮助我们减少许多重复的代码。
Mixin(混合)
“mix-in” properties from existing styles。——官方定义
慕课解释: “mix-in” 的中文翻译为 “混合” 。简而言之,在 Less 中 Mixins 的作用就是,在已有的样式中添加其他已经定义好的属性集合,从而达到属性复用的效果。
Mixin
是一组共用的CSS
属性,类似编程语言中的函数,选择器通过调用Mixin
,把Mixin
中的属性包含进来。
在Less
中,使用Mixins
我们可以轻松的把classA
引入到classB
,从而实现属性上的复用。任何class
或者id
都可以引入。
.round-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
.round-borders; // 调用mixin: round-borders
}
// 输出
.round-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#menu {
color: gray;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
代码解释:使用Mixins
前提是需要先定义一个样式类(.a),然后在引用的样式类(.mixin-class)中写入之前定义的样式类名称,并在名称后加上 “()” 来表示一个 Minxins 。我们可以把 Mixins 当作一个样式的集合,同样后面需要加上 “;” ,避免造成语法错误。
1、不输出Mixin本身
从上面的示例代码中,我们可以看到定义的Mixins
也被编译到了输出的代码中,但是某些情况下这些样式造成不必要的重复。此时我们可以在定义 Mixins 时在类的名称后加上 ()
,这样Mixins
所定义的样式就不会编译到输出的代码中了。
.a() { // 定义带了括号
padding-left: 100px;
}
.myclass {
background : #64d9c0;
.a;
}
// 输出
/* 没有输出mixin .a() 的内容 */
.myclass {
background: #64d9c0;
padding-left: 100px;
}
2. Mixin中的选择器
mixin不仅可以包含属性,还可以包含选择器。
.mixin() {
&:hover {
background: #FFC0CB;
}
}
a {
.mixin();
}
//输出:
a:hover {
background: #FFC0CB;
}
3. 命名空间
命名空间可以将mixin组合到一个公共名称下,这样可避免mixin之间名字冲突。
#outer() {
background:yellow;
.inner {
color: red;
}
}
p {
#outer > .inner;
}
//输出:
p {
color: red;
}
//以下几种写法是等效的。
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();
4. 受保护的命名空间
当保护应用于命名空间时,只有在保护条件返回true时才使用命名空间定义的mixin。命名空间保护类似于mixin的保护。
@import "./lib.less";
#namespace when (@color = blue) {
.mixin() {
color: red;
}
}
p {
#namespace .mixin();
}
//lib.less
@color: blue;
//输出:
p {
color: red;
}
5.!important
关键字
important关键字用于覆盖特定的属性。当它被放置在mixin调用之后,它将所有继承的属性都标记为!important。
.mixin() {
color: #900;
background: #F7BE81;
}
.para1 {
.mixin();
}
.para2 {
.mixin() !important;
}
//输出:
.para1 {
color: #900;
background: #F7BE81;
}
.para2 {
color: #900 !important;
background: #F7BE81 !important;
}
6. Tip
- 定义的
Mixins
名称后面如果不加()
,则会编译到生成的css
中,反之则不会。 - 引用的
Mixins
名称后的()
可以省略,但是为了避免代码混淆,建议大家在引用时加上()
。
Parametric Mixins(参数混合)
慕课解释: 含有传入参数的 Mixins 。
在 Less 中传入参数的Mixins
就叫做参数混合,我们可将其理解为含有参数的函数。参数的传入有多种方式,大体上与ES6
函数中参数较为类似,大家如果有JS
基础的话可以对比着进行理解。
//例如
.border-radius(@radius) {
border-radius: @radius;
}
button {
.border-radius(5px);
}
//输出
button {
border-radius: 5px;
}
参数使用
- 具有多个参数的Mixin – 在这种Mixin类型中,可以使用逗号或分号分隔参数。
- 命名参数 – 在命名参数中,mixin使用参数值而不是位置名来提供参数值。
- @arguments 变量 – @arguments变量包括调用mixin时传递的所有参数。
- 变参和@rest变量 – 变参使用省略号(……)表示
- 模式匹配 – 模式匹配通过传递参数来改变mixin的行为。
1. 设置默认参数
设置默认参数后如果使用Mixins
未传入参数,将取参数的默认值。
TIPS:未设置默认参数且使用
Mixins
时未传入参数编译会报错
.circle(@radius: 5px) {
border-radius: @radius;
}
button {
.circle();
}
//输出
button {
border-radius: 5px;
}
2. 设置多个参数
当Mixins
同时包含多个参数时,多个参数之间使用;
或者,
分隔。建议使用;
,因为在Less
中逗号有两种含义:代表Mixins
参数分隔符或CSS
列表分隔符。
如果使用,
作为分隔符,就不能使用含有,
的属性值作为参数。此外,如果参数之间有一个;
作为分隔符,编译器则会认为,
属于属性值的一部分。
.primary(@color; @padding; @margin: 2px) {
color: @color;
padding: @padding;
margin-top: @margin;
}
button {
.primary(#ffffff; 5px);
}
//输出
button {
color: #ffffff;
padding: 5px;
margin-top: 5px;
}
同时定义多个名称和参数相同的Mixins
是可行的,编译时将会使用所有可以应用的属性。
.img(@color) {
bgckground: @color;
}
.img(@color; @padding: 2px) {
color: @color;
padding: @padding;
}
div {
.img(#000);
}
//输出
div {
backgroundcolor: #000;
color: #000;
padding: 2px;
}
//例子
.mixin(@color) {
color-1:@color;
}
.mixin(@color;@padding:2){
color-2:@color;
padding-2:@padding
}
.mixin(@color;@padding;@margin:2){
color-3:@color;
padding-3:@padding;
margin: @margin @margin @margin @margin;
}
.some .selector div{
.mixin(#008000);//没有@padding的默认值,故为错
//未设置默认参数且使用`Mixins`时未传入参数编译会报错
}
//输出:
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
3. 命令参数
Mixins
中的参数可以不按照特定的顺序定义,可以直接使用其参数名称进行定义。
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.primary {
.mixin(@margin: 20px; @color: #33acfe);
}
.success {
// 第一个参数未填写参数名称,所以代表的是 @color
// 第二个参数名称为 @padding ,所以说 @margin 参数未传入会取默认值
.mixin(#efca44; @padding: 40px);
}
//输出
.primary {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.success {
color: #efca44;
margin: 10px;
padding: 40px;
}
4. @argument 变量
@argument 代表调用 Mixins 时传入的所有参数。
如果我们想要同时处理所有参数,可以使用 @argument 变量。
.box-shadow(@x: 0; @y: 0; @z: 1px; @color: #000) {
box-shadow: @arguments;
}
button {
.box-shadow(2px; 5px);
}
//输出
button {
box-shadow: 2px 5px 1px #000;
}
5. 高级参数和@rest变量
如果想要接收可变数量的参数,我们可以使用...
代表其余的参数。
.mixin(...) { // 匹配0-N 个参数
.mixin() { // 只匹配0个参数
.mixin(@a: 1) { // 匹配0-1个参数
.mixin(@a: 1; ...) { // 匹配0-N个参数
.mixin(@a; ...) { // 匹配1-N个参数
.mixin(@a; @rest...) {
// @rest 表示在 @a 后的所有参数
// @arguments 表示所有参数
}
//示例代码
.box-shadow(...) {
box-shadow: @rest;
}
button {
.box-shadow(2px; 5px; 1px; #000);
}
//输出
button {
box-shadow: 2px 5px 1px #000;
}
6. 模式匹配
当多个相同名称的Mixins
存在时,调用时将会选择最符合的那个 Mixins
。
所以我们可以定义一个标识,以便于引用正确的Mixins
。
//例子
@postion: right;
.margin(left; @size) {
margin-left: @size;
}
.margin(right; @size) {
margin-right: @size;
}
button {
.margim(@postion; 20px);
}
输出代码
button {
margin-right: 20px;
}
Mixins as Functions(混合函数)
Return variables or mixins from mixins 。——官方定义
慕课解释: Mixins 可以作为一个函数使用返回参数或者一个新的 Mixins 。
Mixin
与函数非常相似。Mixin
可以嵌套,可以接受参数并返回值。
Mixin
作用域 –Mixin
中的变量对调用者是可见的,并且可以直接使用。- 返回值 – 在
Mixin
中定义的变量将作为它的返回值。 Mixin
中的Mixin
–Mixin
中的Mixin
也可以作为返回值返回。
混合函数可以对传入参数进行处理后返回,封装判断、循环及计算逻辑,从而达到复用的效果。
//比如我们需要声明一个函数返回 @width、@height 两个变量,我们可以这样定义一个 Mixins 。
.return() {
@width: 80%;
@height: 20px;
}
//然后我们在使用这两个参数的样式表中引入 .mixins() 即可。
.callback {
.return();
width: @width;
height: @height;
}
//输出
.callback {
width: 80%;
height: 20px;
}
1. 返回参数
混合函数可对传入参数进行计算处理。
.img(@line, @row) {
@width: ((@row+ @line) / 2);
}
img {
.img(20px, 50px); // 引入 mixin
width: @width; // 使用返回值(@width)
}
//输出
img {
width: 35px;
}
2. 返回 Mixins
混合函数可以返回一个Mixins
并引入使用。
.return-mixins(@color; @size) {
.mixins() { //返回 mixins
background: @color;
fonts-size: @size;
}
}
#id {
.return-mixins(red; 28px);
.mixins(); //引用返回的 mixins
}
//输出
#id {
background: red;
fonts-size: 28px;
}
3. Tip
- 在
Mixins
中定义的变量和混合函数是仅对调用方来说是可见的。
//比如说下面的用法就是错误的:
.a {
.b(@color){
color: @color;
}
}
.c{
// 此处会报错,因为 .b() 是属于 .a 的作用域,所以 .c 不能直接调用 .b()
.b(#fff);
}
- 如果调用方的作用域中,包含相同名称的变量(包括由另一个混合函数定义的变量),则保留原本定义的变量。从父作用域所继承的变量则会被覆盖重写。
@width: 300px; // 父作用域变量会被覆盖
.a() {
@width: 100px;
}
.b {
.a();
@width: 200px; // 调用方作用域中的变量需在 mixins 之后才不会被 mixins 中的变量覆盖。
width: @width;
}
//输出
.b {
width: 200px;
}
- 混合函数返回值时可以处理传入的参数,对参数进行一系列复杂的参数处理。
- 混合函数返回 Mixins 时注意需要先调用混合函数,才能调用返回的 Mixins 。
Passing Rulesets to Mixins(将规则集传递到混合)
Allow wrapping of a css block, defined in a mixin 。——官方定义
慕课解释:把一个值为规则集的变量作为 Mixins 使用。
变量不仅可以作为一个值或路径,也可以是一组css
属性、嵌套的规则集、媒体声明或存储在变量中的任何其他内容。
使用场景主要用于定义一个样式属性不定的Mixins
,它可以在媒体查询或非支持的浏览器类名中封装一段属性值。规则集可以传递给Mixins
,以便Mixins
可以包装内容。
.ie(@rules) {
@media screen and (min-width: 1200) { @rules(); }
html.lt-ie9 & { @rules(); }
}
div {
background-color: blue;
.ie({
background-color: red;
});
}
//输出
div {
background-color: blue;
}
@media screen and (min-width: 1200) {
div {
background-color: red;
}
}
html.lt-ie9 div {
background-color: red;
}
1、返回Mixins
变量所包含的规则集中也允许含有Mixins
并将其返回。
@return: {
.mixin() {
background-color:red;
}
};
.callback {
@return();
.mixin();
}
//输出代码
.callback {
background-color: red;
}
2、Tips
变量的css
规则集作用域有以下两个特点:
- 规则集内可以使用调用者内定义的变量和混合。
- 外部同名的变量优先级高于调用者内部定义的同名变量。
@params: #fff;
@data: {
color : @params;
};
#id {
@data();
@params: red;
}
//输出代码
#id {
color: #fff; // 将会使用外部全局变量
}
-
定义变量时值为
css
规则集(以下简称变量)时这个变量可以看作是一个Mixins
。但是它与Mixins
又有什么区别哪?主要有以下几点:- 定义的形式不同,
Mixins
可以作为一个ID
选择器或者是类选择器为demo
节点增加样式,简单来说就是Mixins
可以出现在编译后的代码中,而变量不能。 - 作为混合函数时使用范围不同,
Mixins
可以返回Mixins
或变量,而变量只能返回Mixins
。
- 定义的形式不同,
@detached-ruleset: {
@color:blue; // @color 属于私有变量
};
.caller {
@detached-ruleset();
color: @color; // syntax error
}
Import Styles(样式导入)
Import styles from other style sheets——官方定义
慕课解释:通过导入指令引入其他样式表的内容 。
导出并不需要特殊的语法,但是导入需要我们使用@import
语法并加上文件名称。此外导入机制仅编译我们用到的代码,并不会编译多余的代码。
@import 'base.less';
有一点与原生语法不同的是,在CSS
中@import
规则必须位于所有其他类型的规则之前。但是Less
可以将@import
语句放在任意位置。
TIPS:注意,在这里
Less
中虽然允许我们将导入指令写在任意位置,个人建议同CSS
语法一样在文件头部导入文件,便于我们快速查阅导入文件的列表并进行修改。
除了可以引入.less
文件,还可以引导不同类型的文件。
根据导入文件类型的不同,@import
语句可能会出现以下几种情形:
- 如果文件扩展名为
.css
,该文件将被视为CSS
文件,@import
语句引入规则保持不变。 - 如果文件扩展名为除
.css
和.less
以外的拓展名,@import
语句将会将其拓展名视为.less
并将其引入。 - 文件无扩展名时,
@import
语句将会默认添加.less
拓展名并引入。
@import "foo"; // 引入 foo.less
@import "foo.js"; // foo.js 会被当作 less 文件引入
@import "foo.css"; // 规则不变
@import
可以帮助我们形成一个个的文件模块,使用文件模块有以下几个优点:
- 提高代码复用性
- 提高代码可维护性
导入配置
@import (keyword) "filename"
keyword
的值有以下几种:
reference
: 使用Less
文件但是不输出它;inline
: 在输出中包含源文件,但不对其进行处理;less
: 无论拓展名为什么,都视为Less
文件;css
: 无论拓展名为什么,都视为CSS
文件;once
: 仅引入一次文件 (默认行为);multiple
: 多次引入文件;optional
: 找不到文件时停止编译。
@import
语句中可以包含多个配置选项,但必须使用,
分隔开。比如:
@import (optional, reference) "foo.less"
1、reference
使用@import(reference)
导入外部文件,如果没有使用引用的样式,导入的样式将不会添加到编译输出中。
2、inline
使用 @import(inline)
包含外部文件,但不处理它们。
当CSS
文件可能不兼容时,我们使用此选项。因为尽管Less
已经支持大多数已知的标准CSS
,但在某些地方它不支持注释,并且不修改CSS
就不支持所有已知的CSS hack
。
3、less
使用@import (less)
可以忽略引入文件的拓展名,并将其视为less
文件。
4、css
同less
配置选项类似,将文件视为css
文件。
5、once
@import
语句的默认行为。这意味着该文件仅导入一次,该文件的后续导入语句将被忽略。
6、multiple
使用@import (multiple)
可以多次引入名称相同的文件。这是与@import (once)
行为相反的一个选项。
7、optional
使用@import (optional)
仅在文件存在时才允许导入。如果没有配置可选关键字,less
则在导入找不到的文件时会抛出FileError
并停止编译。
Guard(守卫)
Mixin Guards(混合守卫)
Conditional mixins——官方定义
慕课解释:根据条件进行判断。
在 Mixins
的使用条件需要匹配一个值或算法时,我们可以使用 Less
的条件判断。
与 Java
、Python
等函数式编程语言的条件判断一样,不过语法形式略有差异。
为了与 CSS
原生语言语法形式保持一致,在Less
中是通过守卫函数的形式而不是 if/else
,与 @media
的用法类似。
// 我们先来看一段包含条件判断的 Mixins :
.bg (@color; @width) when (@width >= 50%) {
background-color: black;
}
.bg (@color; @width) {
color: @color;
}
// when关键字引入了守卫机制(条件判断),下面让我们来调用定义好的Mixins:
.container1 {
.bg(red; 40%);
}
.container2 {
.bg(red; 60%);
}
// 输出
.container1 {
color: red;
}
.container2 {
background-color: black;
color: red;
}
混合守卫适用于mixins
需要匹配值、运算式、范围的场景,避免mixin
出现调用错误。
1. 条件判断运算符
条件判断的运算符包含以下几个:
>
>=
=
<
=<
此外,true
这个关键字是唯一代表条件为真的值。
// 以下两个 Mixins 是等价的
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
// 其他的值代表条件都为假
.a {
.truth(10); // 10 与 true 不相等,所以不会有任何输出
}
// 对两个变量进行比较
.max (@a; @b) when (@a > @b) { width: @a }
.max (@a; @b) when (@a < @b) { width: @b }
2. 条件逻辑运算符
当Mixins
的判断条件含有两个及两个以上时,我们可以使用逻辑运算符将条件进行关联。
// 使用 and 关键字对两个条件取并集:
.mixin1 (@color) when (iscolor(@color)) and (@color = red) { ... }
// 使用运算符来模拟 or 运算符,只要有一个条件为真就可以匹配。
.mixin2 (@width) when (@width > 20%), (@width < 80%) { ... }
// 使用 not 关键字代表否定条件
.mixin3 (@width) when not (@b > 10%) { ... }
守卫可以用逗号分开,如果任何一个判断语句的计算结果为真,它被认为是一种匹配,类似or
。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
3. 类型检查函数
使用Less
提供的类型检查函数对变量进行判断
.mixin1 (@color) when (iscolor(@color)) { ... }
.mixin2 (@url) when (isurl(@url)) { ... }
主要有以下几种基础的类型检查函数:
iscolor
isnumber
isstring
iskeyword
isurl
如果要检查某个值是否除作为数字外还包含在特定单位中,还可以使用:
ispixel
ispercentage
isem
isunit
4. default()函数
default()
函数可根据已创建的Mixins
条件来形成该条件的补集。
.mixin (@width) when (@width > 10%) { ... }
.mixin (@width) when (default()) { ... } // default()等价于 @width <= 10%
CSS Guards(CSS 守卫)
官方定义: “if”’s around selectors.
慕课解释: 类似与 Mixins 守卫,在选择器中使用类似于 “if” 的判断语句。
Guards
也可以应用于css
选择器,它是用于声明mixin
然后立即调用它的语法糖。
button when (@select = true) {
color: white;
}
// 还可以通过将其与&特性结合使用来实现if类型语句,从而允许您对多个守卫进行分组。
& when (@select = true) {
button {
color: white;
}
span {
color: blue;
}
}
// 注意,还可以通过使用实际的if()函数和变量调用来实现类似的功能。
@dr: if(@my-option = true, {
button {
color: white;
}
a {
color: blue;
}
});
@dr();
Loops(循环)
官方定义: Creating loops .
慕课解释: 创建循环。
在Less
中,我们可以通过mixins
结合guard
函数自身调用从而达到类似于for
循环的效果,创建各种循环迭代结构。
循环主要用于动态创建多个样式类或多个属性值。
@list:a,b;
.for(@counter) when (@counter < length(@list)+1) {
.background-@{counter} {
background-image: url("./images/@{extract(@list,@counter)}.png")
}
.for(@counter+1)
}
.for(1);
// 输出
.background-1 {
background-image: url("./images/a.png")
}
.background-@{counter} {
background-image: url("./images/b.png")
}
// 例子2
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
.generate-columns(4);
// 输出
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
Merge(合并)
官方定义: Combine properties .
慕课解释: 合并属性值 。
合并功能允许将多个属性中的值合并到一个属性的列表中,值用,
或者空格分隔开。
Merge
主要应用于列表属性的整合,比如box-showdow
、transfrom
等属性。
合并的属性必须都加上符号,当符号不相同时,以引用的时候的符号为准。
1. 逗号分隔
使用合并功能之前需定义一个 mixin
并在需要合并的属性后加上+
,然后在引入 minxin 后在被合并的属性后也加上+
。
.mixin() {
box-shadow+: 0 0 10px #333;
}
div {
.mixin();
box-shadow+: 0 0 20px black;
}
// 输出
div {
box-shadow: 0 0 10px #333, 0 0 20px black;
}
2. 空格分隔
使用步骤同逗号分隔,将属性后的符号改为 +_
即可。
.mixin() {
transform+_: scale(2);
}
div {
.mixin();
transform+_: rotate(15deg);
}
// 输出
div {
transform: scale(2) rotate(15deg);
}
Parent Selectors(父选择器)
官方定义: Referencing parent selectors with & 。
慕课解释: 用
&
符号引用父选择器。
在嵌套结构中&
表示父选择器。
a {
color: blue;
&:hover {
color: green;
}
}
//输出
a {
color: blue;
}
a:hover {
color: green;
}
嵌套结构中默认编译规则为.parentSelector .childSelector
,即父选择器和子选择器之间使用空格分隔开的。
所以在未添加&
的情况下, :hover
输出的样式选择器会是a :hover
, 这与我们预期的结果是不一致的。
1. 多个 &
组合
我们可以使用多个&
运算符并使用其他运算符连接起来,便于重复引用父选择器而无需重复其名称。
.link {
& , & {
color: red;
}
&& {
color: blue;
}
&, &ish { //&的另一个典型用法是生成部分重复的类名
color: cyan;
}
}
// 输出
.link , .link {
color: red;
}
.link.link {
color: blue;
}
.link, .linkish {
color: cyan;
}
注意&
表示所有父选择器(不只是最近的祖先)
.grand {
.parent {
& > & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
}
// 输出
.grand .parent > .grand .parent {
color: red;
}
.grand .parent .grand .parent {
color: green;
}
.grand .parent.grand .parent {
color: blue;
}
.grand .parent,
.grand .parentish {
color: cyan;
}
2. 更改选择器顺序
在某些情况下我们需要将选择器放在继承的(父)选择器之前。 此时可以通过将&
运算符放在当前选择器后面来完成。
.header {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
// 输出
.header {
border-radius: 5px;
}
.no-borderradius .header {
background-image: url('images/button-background.png');
}
3. 排列组合
&
运算符可用于生成逗号分隔列表中选择器的所有可能的排列组合。
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
// 输出
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
border-top: 0;
}
函数
1. 杂项函数
杂项函数主要用于处理图片路径、颜色等途径或单位的修改以及某个含有单位值的单位获取。
1.1 color
函数
函数用途: 用于解析颜色,将颜色值的字符串处理为可以使用的颜色值。
- 参数:
string
指定颜色值的字符串 - 返回值:
color
颜色值 - 语法:
color(param: string) => value
.color {
color: color("#fff");
}
// 输出
.color {
color: #fff;
}
1.2 image-size
函数
函数用途: 用于获取图片文件的尺寸。
- 参数:
string
获取尺寸的文件 - 返回值: 尺寸(图片长和宽)
- 语法:
url(path:string) => value
.img {
background:url("file.png");
background-repeat:no-repeat;
background-size: image-size("file.png");
}
// 输出
.img {
background:url("file.png");
background-repeat:no-repeat;
background-size: 10px 10px;
}
1.3 image-width
函数
函数用途: 获取图片文件宽度。
- 参数:
string
获取尺寸的宽度 - 返回值: 宽度(单位为
px
) - 语法:
image-width(path: string) => value
.img {
width: image-width("file.png");
}
// 输出
.img {
width: 10px;
}
1.4 image-height
函数
函数用途: 获取图片文件长度。
- 参数:
string
获取尺寸的长度 - 返回值: 长度(单位为
px
) - 语法:
image-height(path: string) => value
.img {
height: image-height("file.png");
}
// 输出
.img {
height: 10px;
}
1.5 convert
函数
函数用途: 单位转换
第一个参数包含一个带单位的数字,第二个参数包含一个单位。
如果两个单位兼容,则进行单位转换。如果它们不兼容,则第一个参数将按原样返回。
-
支持转换的单位如下:
- lengths(长度单位):
m
,cm
,mm
,in
,pt
,pc
- time(时间单位):
s
,ms
- angle(角度单位):
rad
,deg
,grad
,turn
- lengths(长度单位):
-
参数:
number
: 含有单位的浮点数。identifier
,string
或者escaped value
: 单位 。
-
返回值:
number
.convert {
time: convert(9s, "ms");
lenght: convert(14cm, mm);
unkow: convert(8, mm); // 无法转换返回原值
}
// 输出
.convert {
time: 9000ms;
lenght: 140mm;
unkow: 8; // 无法转换返回原值
}
1.6 data-uri
函数
函数用途: 将内联资源转换为
base64
或者text/html
格式 。
参数:
mimetype
: mime 类型字符串(可选)。url
: 内联文件的路径。
如果没有 mimetype
,data-uri
函数将从文件名后缀中猜测出来。 文本和svg
文件编码为 utf-8
,其他所有文件编码为 base64
。
如果提供了mimetype
,且 mimetype
参数以 base64
结尾,则该函数将使用 base64
转换图片。 例如,image/jpeg; base64
被编码为 base64
,而 text / html
被编码为 utf-8
。
如果
ieCompat
选项打开,资源过大,或者在浏览器中使用该功该函数则会回退为url()
。
.img {
// 1
background: data-uri('../data/image.jpg');
// 2
background: data-uri('image/jpeg;base64', '../data/image.jpg');
// 3
background: data-uri('image/svg+xml;charset=UTF-8', 'image.svg');
}
// 输出
.img {
// 1
background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
// 2
background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
// 3
background: url("data:image/svg+xml;charset=UTF-8,%3Csvg%3E%3Ccircle%20r%3D%229%22%2F%3E%3C%2Fsvg%3E");
}
1.7 default
函数
函数用途: 仅在混合守卫的条件中使用,当无其他
mixin
匹配时返回true
,反之则返回false
。
在 Mixins
中我们可以通过 default()
函数结合其他函数对 Mixins
进行保护。
.x {
.m(red) {case: darkred}
.m(@x) when (iscolor(@x)) and (default()) {default-color: @x}
.m('foo') {case: I am 'foo'}
.m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}
&-blue {.m(red)}
&-green {.m(green)}
&-foo {.m('foo')}
&-baz {.m('baz')}
}
// 输出
.x-blue {
case: darkred;
}
.x-green {
default-color: #008000;
}
.x-foo {
case: I am 'foo';
}
.x-baz {
default-string: and I am the default;
}
1.8 unit
函数
函数用途: 更改或删除尺寸的单位。
- 参数:
dimension
: 填入一个数值,带单位或者不带unit
:(可选参数) 填入需要转换的单位,如果未传入,则移除数值的单位。
- 语法:
unit(dimension, ?unit) => value
.unit {
width: unit(5px, rem);
height: unit(50px)
}
// 输出
.unit {
width: 5rem;
height: 50
}
1.9 get-unit
函数
函数用途: 返回数值的单位。如果参数包含带单位的数字,则该函数返回其单位。不带单位的参数将导致返回一个空值。
- 参数:带或不带单位的数字。
- 语法:
get-unit(dimension) => value
.get-unit {
unit: get-unit(5px)
}
// 输出
.get-unit {
unit: px
}
2. 字符串函数
字符串函数主要用于字符串的转码、替换、格式化等方面,可以帮助我们快速简便的处理字符串。
2.1 escape
函数
函数用途: 将
URL
编码应用于在输入字符串中找到的特殊字符。
tips:
- 以下这些字符不会参与编码:
,
,/
,?
,@
,&
,+
,'
,~
,!
,$($)
- 常见的编码字符:
\<space\>
,#
,^
,(
,)
,{
,}
,|
,:
,>
,<
,;
,]
,[
,=
- 参数:
string
需要转义的字符串。 - 返回值: 转义后的字符串,未带引号。
- 语法:
escape(param) => value
.escape {
string: escape('a=1')
}
<!-- 输出 -->
.escape {
string: a%3D1
}
2.2 e
函数
函数用途:
CSS
转义,替换为~”value”语法。
该函数可将字符串去除引号并返回。它可用于将输出无效的CSS
值转换为 CSS
语法,或转换 Less
不能识别的专有语法。
- 参数:
string
需要转义的字符。 - 返回值:
string
去除引号后的转义字符。 - 语法:
e(param) => value
.img {
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
}
//输出
.img {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
tips:
该函数还接受含~
、""
的值和数字作为参数。其他类型的参数会报错。
2.3 %
format
函数
函数用途: 格式化字符
第一个参数是带有占位符的字符串。所有占位符开始百分号%
后跟字母s
,S
,d
,D
,a
,或A
。其余参数包含替换占位符的表达式。如果需要输出百分比符号,请用另一个百分比将其转义%%
。
如果需要将特殊字符转义为utf-8
转义码,请使用大写占位符。该函数将转义除以外的所有特殊字符()'~!
。空格编码为%20
。小写占位符保留原样的特殊字符。
占位符:
1.d
,D
,a
,A
可以通过任何种类的参数(颜色,号码,转义值,表达式,…)的替换。如果将它们与字符串结合使用,则将使用整个字符串-包括引号。但是,引号按原样放置在字符串中,不能用“/”或类似符号进行转义。
2. s
,S
可以用任何表达式替换。如果将它与字符串一起使用,则仅使用字符串值-省略引号。
- 参数:
string
: 带占位符字符串。anything*
: 用于替换占位符的值。
- 返回值:格式化后的字符串。
- 语法:
%(string, anything) => value
.format {
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
}
// 输出
.format {
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
}
2.4 replace
函数
函数作用: 替换字符串中的文本.
- 参数:
string
:被替换的字符。pattern
: 需搜索的字符串或正则表达式。replacement
: 用于替换匹配模式的字符串。flags
:(可选)正则表达式标志。
- 返回值: 替换后的字符串。
- 语法:
replace(string, pattern, replacement, ?flags) => value
.replace {
value: replace("Hello, Mars?", "Mars\?", "Earth!");
}
// 输出
.replace {
value: "Hello, Earth!";
}
3. 列表函数
在
Less
中一个变量也可表示一个列表,列表用,
分隔开,类似于其他语言中的数组,该章节的函数就是为了操作列表所产生的,比如返回列表长度、获取指定元素的等。
3.1 length
函数
函数作用:返回值列表中的元素个数。
-
参数:
list
用逗号或空格分隔的值列表。 -
返回值: 列表中元素的整数。
-
语法:
length(list) => value
@list: "banana", "tomato", "potato", "peach";
.fruit {
number: length(@list);
}
// 输出
.fruit {
number: 4;
}
3.2 extract
函数
函数作用:返回列表中指定位置的值。
- 参数:
list
用逗号或空格分隔的值列表。index
一个整数,它指定要返回的列表元素的位置。
- 返回值:列表中指定位置的值。
- 语法:
extract(list) => value
@list: apple, pear, coconut, orange;
.get-fruit {
value: extract(@list, 3);
}
// 输出
.get-fruit {
value: coconut;
}
4. 数学函数
数学函数用于数组的处理,比如数字的取整四舍五入、三角函数等数学运算,三角函数及 π 值获取的函数。
4.1 ceil
函数
函数作用:取整,将浮点数向下舍入到下一个整数。
- 参数:
number
浮点数。 - 返回值: 整数。
- 语法:
ceil(number) => value
.ceil {
rows: ceil(2.3);
}
// 输出
.ceil {
rows: 3;
}
4.2 floor
函数
函数作用:取整,将浮点数向上舍入到上一个整数。
- 参数:
number
浮点数。 - 返回值: 整数。
- 语法:
floor(number) => value
.floor {
rows: floor(2.8);
}
// 输出
.floor {
rows: 2;
}
4.3 percentage
函数
函数作用:将浮点数转换为百分比字符串。
- 参数:`number 浮点数。
- 返回值:
string
百分比字符串。 - 语法:
percentage(number) => value
.container {
width: percentage(0.5);
}
// 输出
.container {
width: 50%;
}
4.4 round
函数
函数作用: 按需舍入。遵循四舍五入。
- 参数:
number
:浮点数。decimalPlaces
:(可选)要舍入的小数位数。默认为 0。
- 返回值:
number
- 语法:
round(number) => value
.round {
rows: round(1.67);
rows: round(1.67, 1);
}
// 输出
.round {
rows: 2;
rows: 1.7;
}
4.5 sqrt
函数
函数作用:计算数字的平方根。保持单位不变。
- 参数:
number
浮点数。 - 返回值:
number
- 语法:
sqrt(number) => value
.img {
width: sqrt(25px);
}
// 输出
.img {
width: 5px;
}
4.6 abs
函数
函数作用:计算数字的绝对值。保持单位不变。
- 参数:
number
浮点数。 - 返回值:
number
- 语法:
abs
.container {
width: abs(25px);
height: abs(-18.6%);
}
// 输出
.container {
width: 25px;
height: 18.6%;
}
4.7 sin
函数
函数作用:计算正弦函数。
假定数字的弧度不带单位。
- 参数:
number
浮点数。 - 返回值:
number
- 语法:
sin(number) => value
.sin {
number: sin(1);
}
// 输出
.sin {
number: 0.8414709848078965;
}
4.8 asin
函数
函数作用:计算反正弦函数
返回以弧度表示的数字,例如 -π/2
和之间的数字π/2
。
- 参数:
number
[-1, 1]间隔中的浮点数。 - 返回值:
number
- 语法:
asin(number) => value
.animation {
rotate: asin(-0.8414709848078965);
}
// 输出
.animation {
rotate: -1rad;
}
4.9 cos 函数
函数作用:计算余弦函数。
假定数字的弧度不带单位。
- 参数:
number
浮点数。 - 返回值:
number
- 语法:
cos(number) => value
.cos {
number: cos(1);
}
// 输出
.cos {
number: 0.5403023058681398;
}
4.10 acos
函数
函数作用:计算反余弦(余弦的倒数)函数。
返回以弧度为单位的数字,例如 0 到 π
之间的数字。
- 参数:
number
从[-1,1]间隔开始的浮点数。 - 返回值:
number
- 语法:
acos(number) => value
.animation {
rotate: acos(0.5403023058681398);
}
// 输出
.animation {
rotate: 1rad;
}
4.11 tan
函数
函数作用:计算切线函数。
假定数字的弧度不带单位。
- 参数:
number
浮点数。 - 返回值:
number
- 语法:
tan(number) => value
.table {
rows: tan(1deg);
}
// 输出
.table {
rows: 0.017455064928217585;
}
4.12 atan
函数
函数作用:计算反正切(反正切)函数。
返回以弧度表示的数字,例如-π/2
和之间的数字π/2
。
- 参数:
number
浮点数。 - 返回值:
number
- 语法:
atan(number) => value
.animation {
rotate: atan(0);
}
// 输出
.animation {
rotate: 0rad;
}
4.13 pi
函数
函数作用:返回 π 值
- 参数:
none
- 返回值:
number
- 语法:
pi() => value
@width: 5px;
.pi {
height: 2*pi()*@width;
}
// 输出
.pi {
height: 31.41592653589793;
}
4.14 pow
函数
函数作用:返回提高到第二个参数的幂的第一个参数的值。设第一个参数为A,第二个参数为B,返回A的B次方。
返回值的尺寸与第一个参数的尺寸(单位)相同,而第二个参数的尺寸(单位)将被忽略。
- 参数:
number
:base
浮点数。number
:exponent
浮点数。
- 返回值:
number
- 语法:
pow(number, number) => value
.pow {
border: pow(0px, 0cm);
}
// 输出
.pow {
border: 1px;
}
4.15 mod
函数
函数作用:返回第一个参数对第二参数取余的结果。
返回值的尺寸与第一个参数的尺寸(单位)相同,而第二个参数的尺寸(单位)将被忽略。该功能还可以处理负数和浮点数。
- 参数:
number
:一个浮点数。number
:一个浮点数。
- 返回值:
number
- 语法:
mod(number, number) => value
.mod {
height: mod(11px, 6cm);
}
// 输出
.mod {
height: 5px;
}
4.16 min
函数
函数作用:返回一个或多个值中的最小值。
- 参数:
value1, ..., valueN
一个或多个要比较的值。 - 返回:最小值。
- 语法:
min(number,...) => value
.grid {
rows: min(5, 10);
}
// 输出
.grid {
rows: 5;
}
4.17 max
函数
函数:返回一个或多个值中的最大值。
- 参数:
value1, ..., valueN
一个或多个要比较的值。 - 返回:最大值。
- 语法:
max(number,...) => value
.grid {
rows: max(5, 10);
}
// 输出
.grid {
rows: 10;
}