Less学习

Jelly儿

于 2024-03-15 19:56:30 发布

阅读量573

点赞数 21

文章标签： less 学习 css 前端

本文链接：https://blog.csdn.net/qq_39241736/article/details/136748438

版权

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
参数：
- 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;
}

Jelly儿

关注

21
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
Less学习

使用符号来定义变量，在Less中开头是则是变量，关于变量的命名方法，大家可以参考js中命名的规则，毕竟是做前端的，有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写，从第二个开始，单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……，当然也是可是使用香肠命名法用下划线“_”来命名。如，box_main,border_bottom,……
复制链接

扫一扫

Less学习

Less

介绍

1、定义：

2、使用

3、Less 历史

4、Less 特性

5、对比

基础知识

1、环境搭建

2、一个简单的例子

3、注释

4、嵌套

5、运算符

Variables（变量）

1、定义：

2、使用：

3、变量特点：

4、在存在多个同名变量时，变量如何获取值？

5、变量的其它使用技巧：初始值

Extend（继承）

1、:extend()语法

2.:extend()可直接附加在选择器上使用

3.:extend()也可以放到样式集中使用，但注意在使用时需在前面加上& 符号

4.:extend()嵌套选择器

5.:extend()中选择符的精确匹配

6. 使用n的选择器、使用属性筛选的选择器

7. 继承中的all关键字

8. 选择器插值与:extend()

9. 作用范围:extend() 在@media中的使用

10. 重复检测 - Duplication Detection

11. Tip

12.Extend案例扩展

Mixin（混合）

1、不输出Mixin本身

2. Mixin中的选择器

3. 命名空间

4. 受保护的命名空间

5.!important关键字

6. Tip

Parametric Mixins（参数混合）

1. 设置默认参数

2. 设置多个参数

3. 命令参数

4. @argument 变量

5. 高级参数和@rest变量

6. 模式匹配

Mixins as Functions（混合函数）

1. 返回参数

2. 返回 Mixins

3. Tip

Passing Rulesets to Mixins（将规则集传递到混合）

1、返回Mixins

2、Tips

Import Styles（样式导入）

导入配置

1、reference

2、inline

3、less

4、css

5、once

6、multiple

7、optional

Guard(守卫)

Mixin Guards（混合守卫）

1. 条件判断运算符

2. 条件逻辑运算符

3. 类型检查函数

4. default()函数

CSS Guards（CSS 守卫）

Loops（循环）

Merge（合并）

1. 逗号分隔

2. 空格分隔

Parent Selectors（父选择器）

1. 多个 & 组合

2. 更改选择器顺序

3. 排列组合

函数

1. 杂项函数

1、`:extend()`语法

2.`:extend()`可直接附加在选择器上使用

3.`:extend()`也可以放到样式集中使用，但注意在使用时需在前面加上`&` 符号

4.`:extend()`嵌套选择器

5.`:extend()`中选择符的精确匹配

6. 使用`n`的选择器、使用属性筛选的选择器

7. 继承中的`all`关键字

8. 选择器插值与`:extend()`

9. 作用范围`:extend()` 在`@media`中的使用

5.`!important`关键字

1、返回`Mixins`

1. 多个 `&` 组合

1.1 `color` 函数

1.2 `image-size` 函数

1.3 `image-width` 函数

1.4 `image-height` 函数

1.5 `convert` 函数

1.6 `data-uri` 函数

1.7 `default` 函数

1.8 `unit` 函数

1.9 `get-unit` 函数

2.1 `escape` 函数

2.2 `e` 函数

2.3 `%` `format`函数

2.4 `replace` 函数

3.1 `length` 函数

3.2 `extract` 函数

4.1 `ceil` 函数

4.2 `floor`函数

4.3 `percentage` 函数

4.4 `round` 函数

4.5 `sqrt` 函数

4.6 `abs` 函数

4.7 `sin` 函数

4.8 `asin` 函数

4.10 `acos` 函数

4.11 `tan` 函数

4.12 `atan` 函数

4.13 `pi` 函数

4.14 `pow` 函数

4.15 `mod`函数

4.16 `min`函数

4.17 `max` 函数