less - 基础篇

Sokeer
417 阅读27分钟

课程目标

1、学会正确的使用LESS中的变量、混合、嵌套、运算、函数、作用域、条件表达式。

1. 初见Less

1.1 什么是LESS

Less是一个CSS预编译器，它可以扩展CSS语言，添加功能如允许变量(variables)，混合(mixins)，函数(functions)和许多其他的技术，让你的CSS更具维护性、主题性、扩展性。

1.2 LESS官方网站

英文 www.lesscss.org/

中文 less.bootcss.com/

1.3 与LESS的第一次碰面

传统写法：

.conten ul{
    list-style: none;
}
.conten li{
    padding-left: 15px;
    height: 24px;
    line-height: 24px;
    background: url("arr.jpg") no-repeat center left;
}
.conten li a{
    color: #535353;
    text-decoration: none;
    font-family: "microsoft sans serif", "黑体";
}

less写法：

//less中的嵌套语法 
.conten {
				
    ul{
        list-style: none;

        li{
            padding-left: 15px;
            height: 24px;
            line-height: 24px;
            background: url("arr.jpg") no-repeat center left;

            a{
                color: #535353;
                text-decoration: none;
                font-family: "microsoft sans serif", "黑体";
            }
        }
    }
}

1.4 LESS中的注释

// 以//开始的注释，不会被编译到css文件中。

/**/ 以/**/包裹的注释会被编译在css的文件中。

2. 正确使用LESS

2.1 如何使用LESS

LESS文件只有在被编译后才能够被浏览器识别使用。

2.2 LESS编译工具

1、Less编译工具有三个

2、Koala的基本使用

1 . 官网下载，安装很简单。
2 . 将项目 拖到 Koala，即可导入项目。
3 . 选中一个 .less文件，点击“执行编译”，就会在同一个目录下，生成对应的 .css 文件。

image.png

image.png

2.3 客户端调试方式

在浏览器环境中使用 Less ：

1、首先引用 .less 文件。
注意引用时使用link引入,然后将rel属性设置为rel="stylesheet/less"。

2、然后引用 less.js 。
注意:引入普通js引入方式一致,但是一定要放置在less样式文件之后!

<link rel="stylesheet/less" type="text/css" href="styles.less" /> 

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>`

缺点：无法查看编译后的.css文件。推荐使用Koala。

3. 变量(variables)

LESS中，通过添加前缀@，来定义一个变量。

@变量名 = 值;

3.1 普通的变量

普通变量 保存的是 css属性的取值，如颜色值，关键字等。

1.变量的定义方式

@变量名 : 值;

2.示例

less编写

@bgColor: #5B83AD;
@fontColor: white;

#header{
    color: @fontColor;
    background-color: @bgColor;
}

编译结果

#header {
  color: #ffffff;
  background-color: #5b83ad;
}

3.注意由于变量只能定义一次，实际上他们就是"常量"。

3.2 作为选择器和属性名

变量 保存的是 css的选择器名 或 属性名。

1.使用时将变量以 @{变量名} 的方式使用。

2.示例

less编写

@mySelector: active;
@activeProperty: color;

.@{mySelector}{
    @{activeProperty}: red;
}

编译结果

.active {
  color: red;
}

3.3 作为URL

1.定义时，使用 "" 将变量的值扩起来，使用时同样将变量以 @{变量名} 的方式使用。

2.示例

less编写

@imgUrl: "http://www.abc.com/imgs/pic1.png";

.item{
    background: url("@{imgUrl}") no-repeat;
}

编译结果

.item {
  background: url("http://www.abc.com/imgs/pic1.png") no-repeat;
}

3.4 延迟加载

什么是延迟加载？ 变量是延迟加载的，在使用前不一定要预先声明。

示例：

less编写

.box{
    width: @aaa;
}

@aaa: @bbb;
@bbb: 100px;

编译结果

.box {
  width: 100px;
}

3.5 定义多个相同名称的变量时

在定义一个变量两次时，只会使用最后定义的变量。
Less会从当前作用域中向上搜索。
这个行为类似于CSS的定义中始终使用最后定义的属性值。

示例：

less编写

@var: 10px;

.aaa{
    @var: 20px;
    .bbb{
        @var: 30px;
        height: @var;
        @var: 40px;
    }
    width: @var;
}

编译结果

.aaa {
  width: 20px;
}
.aaa .bbb {
  height: 40px;
}

4. 混合(mixins)

什么是混合？ 混合就是一种将一系列属性从一个规则集引入("混合")到另一个规则集的方式。

语法：在一个规则集中，不仅可以写具体的样式，还可以写其它规则集的名字，形成嵌套关系。编译后，子规则集中的样式就会被复制到当前规则集中。

应用场景：将一些公共的样式放在一个规则集中，通过混入来复用到其它规则集中。

4.1 普通混合

示例:

less编写

.bordered{
    border-top: dotted 1px black;
    border-bottom: solid 2px pink;
}

.box{
    .bordered; //混入 .bordered 规则集
	
    color: white;
}

编译结果

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px pink;
}
.box {
  border-top: dotted 1px black;
  border-bottom: solid 2px pink;
  color: white;
}

4.2 不输出的混合

什么是不输出的混合？ 如果你想要创建一个混合集，但是却不想让它输出到的css文件中。

语法：在类名 后面添加一个 圆括号()。

编译结果：带圆括号后缀的类 不会被 输出到 编译后的css文件中。

示例：

less语句

.my-mixin{
    color: pink;
}

.my-other-mixin(){ //不会被输出
    font-size: 30px;
}

.box{
    .my-mixin;
    .my-other-mixin;
}

编译结果

.my-mixin {
  color: pink;
}
.box {
  color: pink;
  font-size: 30px;
}

4.3 带选择器的混合

什么是带选择器的混合？即一个混合的内容中包含子选择器，而不只是一条条具体的样式。

&符号：表示父级选择器。

示例：

less语句

.my-hover-mixin(){ //不输出混合
    &:hover{
        color: #333;
    }
}

.my-other-hover-mixin{ //输出混合
    &:hover{
        font-size: 30px;
    }
}

.active{
    .my-hover-mixin;
}

.other-active{
    .my-other-hover-mixin;
}

编译结果

.my-other-hover-mixin:hover {
  font-size: 30px;
}
.active:hover {
  color: #333;
}
.other-active:hover {
  font-size: 30px;
}

4.4 带参数的混合

语法：定义时，圆括号中定义形参。 使用时，圆括号中传入实际的值。

类名(形参){
    //具体的样式规则
}

示例：

less语句

.border(@border_color){
    border: solid 1px @border_color;
}

.box {
    .border(#333)
}

编译结果

.box {
  border: solid 1px #333333;
}

4.5 带参数并且有默认值

语法：在形参的后面跟上 冒号:默认值 。

示例：

less语句

.border(@border_color: #666){
    border: solid 1px @border_color;
}

.box1 {
    .border(#333); //传入实参
}

.box2 {
    .border(); //不传实参
}

编译结果

.box1 {
  border: solid 1px #333333;
}
.box2 {
  border: solid 1px #666666;
}

4.6 带多个参数的混合

什么是多参数？

一个集合可以带多个参数，参数之间可以用分号或者逗号分割。但是推荐使用分号分割，因为逗号符号有两个意思。它可以解释为mixins参数分隔符或者css列表分隔符。

多参数时，参数的分割方式 决定 参数的传递方式：

1）如果实参都是以逗号分割的，则会依次传给各个形参。
2）如果实参分割符既有逗号，又有分号，那么，会把分号前面的看作一个整体，传给一个形参。

示例：

less语句

.mixin(@color; @padding:10px; @margin:20px){
    color: @color;
    padding: @padding;
    margin: @margin;
}

.box1{
    .mixin(#ccc;)
}

.box2{
    .mixin(#666; 30px; 40px)
}

.box3{
    .mixin(1,2,3; 4,5,6)
}

.box4{
    .mixin(1,2,3)
}

.box5{
    .mixin(1,2,3;)
}

编译结果

.box1 {
  color: #cccccc;
  padding: 10px;
  margin: 20px;
}
.box2 {
  color: #666666;
  padding: 30px;
  margin: 40px;
}
.box3 {
  color: 1, 2, 3;
  padding: 4, 5, 6;
  margin: 20px;
}
.box4 {
  color: 1;
  padding: 2;
  margin: 3;
}
.box5 {
  color: 1, 2, 3;
  padding: 10px;
  margin: 20px;
}

定义多个具有相同名称和参数数量的混合（这部分好像有点问题！！！）

定义多个具有相同名称和参数数量的mixins是合法的。Less会使用它可以应用的属性。如果使用mixin的时候只带一个参数，比如.mixin(green)，这个属性会导致所有的mixin都会使用强制使用这个明确的参数。

示例

less语句

.mixin(@color){
    color-1: @color;
}
.mixin(@color; @padding: 10px){
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 20px){
    color-3: @color;
    padding-3: @padding;
    margin-3: @margin @margin @margin @margin;
}

.wrapper .content .title{
    .mixin(#666);
}

编译结果

.wrapper .content .title {
  color-1: #666666;
  color-2: #666666;
  padding-2: 10px;
}

4.7 命名参数

什么是命名参数？

引用mixin时，可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都已通过它的名称来引用,这样就不必按照任意特定的顺序来使用参数

示例：

less语句

.mixin(@color:black; @margin:10px; @padding: 20px){
    color: @color;
    margin: @margin;
    padding: @padding;
}

.class1{
    .mixin(@margin:20px; @color: #672341)
}

.class2{
    .mixin(#234231; @padding: 40px)
}

编译结果

.class1 {
  color: #672341;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #234231;
  margin: 10px;
  padding: 40px;
}

4.8 arguments变量

什么是@arguments变量？ @arguments 代表所有的可变参数。

1）@arguments的参数的先后顺序就是你的()括号内的参数的先后顺序。

2）传递实参时，值得位置和个数也是一一对应的。只有一个值，把值赋值给第一个；两个值，赋值给第一个和第二个；三个值，分别赋值给前三个，以此类推。但是如果想给第一个和第三个赋值，你不能写（值1, ,值3），必须把原来的默认值写上去!

示例1：

less语句

.border(@type:solid; @color:red){
    border: 10px @arguments;
}

.box1 {
    .border();
}

编译结果

.box1 {
  border: 10px solid #ff0000;
}

示例2：

less语句

.border(@width: 10px; @type:solid; @color:red){
    border: @arguments;
}

.box1 {
    .border(20px);
}

.box2 {
    .border(20px, dotted);
}

.box3 {
    //如果写成 .border(20px, , green); 则会报错。
    .border(20px, solid, green);
}

编译结果

.box1 {
  border: 20px solid #ff0000;
}
.box2 {
  border: 20px dotted #ff0000;
}
.box3 {
  border: 20px solid #008000;
}

4.9 匹配模式

什么是匹配模式？ 传值的时候定义一个字符，在使用的时候使用那个字符，就调用那条规则。

简单理解：存在多个同名的规则集时，为了区分它们，需要在形参列表中添加一个名字，来唯一标识当前的规则集。使用时，实参列表第一个必须是规则集名字，才能准确知道使用的是哪一个规则集，其它实参则传给形参。

1）如果定义了多个名字相同的混合，虽然名字相同，但是它们设置了不同的样式。为了在使用时能够区分它们，需要在参数列表的第一位，添加一个字符，来唯一标识当前的混合。这个 标识变量 是不带@符号的，而 形参变量 是带@符号的。

2）使用混合时，第一个传入的是标识变量，它解决使用哪一个混合，其它参数则传入的是实参值。

示例：

less语句

.border(all, @w:5px){
    border-radius: @w;
}

.border(t_l, @w:5px){
    border-top-left-radius: @w;
}

.border(t_r, @w:5px){
    border-top-right-radius: @w;
}

.border(b_l, @w:5px){
    border-bottom-left-radius: @w;
}

.border(b_r, @w:5px){
    border-bottom-right-radius: @w;
}

.box1{
    .border(all)
}

.box2{
    .border(all, 20px)
}

.box3{
    .border(t_l);
    .border(b_r);
}

.box4{
    .border(t_l, 20px);
    .border(t_r, 30px);
    .border(b_l, 40px);
    .border(b_r, 50px);
}

编译结果

.box1 {
  border-radius: 5px;
}
.box2 {
  border-radius: 20px;
}
.box3 {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.box4 {
  border-top-left-radius: 20px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 50px;
}

默认携带参数 （这部分视频中没有讲！！！）

4.10 带返回值的混合

如果一个规则集的花括号{}中，定义了变量，则这个变量称为当前规则集的返回值。

混入时，子规则集中定义的变量 可以在父规则集 花括号{}中使用。

示例：

less语句

.average(@x, @y){
    @average:((@x + @y)/2);
}

.box {
    .average(16px, 50px);
    padding: @average;
}

编译结果

.box {
  padding: 33px;
}

实例分析

1.首先将16px和50px赋值给混合.average进行计算；
2.将计算的结果赋值给变量@average；
3.然后再div中调用average的值；
4.编译后就得到了average的值33px；

5. 嵌套规则(nested-rules)

1、什么是嵌套规则？嵌套规则它模仿了HTML的结构，让我们的css代码更加简洁明了清晰。

示例：

传统css写法

#header{
    color: black;
}

#header .navigation{
    font-size: 12px; 
}

#header .logo{
    width: 300px;
}

less嵌套写法

#header{
    color: black;

    .navigation{
        font-size: 12px; 
    }

    .logo{
        width: 300px;
    }
}

2、父元素选择器 &

& 表示当前选择器的所有父选择器。

示例：

传统写法

.bgcolor{
    background: #666666;
}
.bgcolor a{
    color: #333333;
}
.bgcolor a:hover{
    color: #eeeeee;
}

less写法

.bgcolor{
    background: #666666; 

    a{
        color: #333333;

        &:hover{
            color: #eeeeee;
        }
    }
}

3、改变选择器的顺序：将&放到当前选择器之后，就会将当前选择器插入到所有的父选择器之前。

示例

less语句

ul{
    font-size: 10px;

    li{
        .item &{
            color: #333333;
        }
    }
}

编译结果

ul {
  font-size: 10px;
}
.item ul li {
  color: #333333;
}

4、组合使用生成所有可能的选择器列表

语法：使用两个连续的&。

示例：

less语句

ul, li, p, a{
    color: #666666;

    & & {
        font-size: 20px;
    }
}

编译结果

ul,
li,
p,
a {
  color: #666666;
}
ul ul,
ul li,
ul p,
ul a,
li ul,
li li,
li p,
li a,
p ul,
p li,
p p,
p a,
a ul,
a li,
a p,
a a {
  font-size: 20px;
}

6. 运算(operations)

任何数值，颜色和变量都可以进行运算。

6.1 数值型运算

less会为你自动推断数值的单位，所以你不必每一个值都加上单位，但至少要有一个值带单位。
注意：运算符与值之间必须以空格分开，涉及优先级时以()进行优先级运算。

示例：

less语句

.class1{
    width: 20px + 10;
}

编译结果

.class1 {
  width: 30px;
}

6.2 颜色值运算

less在运算时，先将颜色值转换为rgb模式进行运算，最后再转换为16进制的颜色值并且返回。

注意：
1、既然是转换为rgb模式，我们知道rgb的取指范围是0~255，所以我们计算的时候不能超过这个区间，超过后默认使用最大值255计算!同理，如果为负数，则按最小值0计算。
2、不能使用颜色名，如red等。

示例：

less语句

.bg{
    background: #000000 + 21;
}

编译结果

.bg {
  background: #151515;
}

分析：
#000000 --> rgb(0, 0, 0)
#151515 --> rgb(21,21,21)
rgb(0, 0, 0) + 21 === rgb(21,21,21)

7. 函数(functions)

Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数，这些函数使用起来非常简单。

如：颜色转换函数：
rgb()函数：将rgb模式的值转换为16进制的值。
blue()函数：提取蓝色值。

示例：
less语句 

.bgColor{
    background: rgb(12, 34, 56);
}

.bgColor2{
    background: blue(#0c2238);
}

编译结果

.bgColor {
  background: #0c2238;
}
.bgColor2 {
  background: 56;
}

8. 命名空间

什么是命名空间？将一些需要的混合组合在一起，可以通过嵌套多层id或者class来实现!

示例：

less语句

#bgColor(){
    background: #123456;

    .a{
        color: #333333;

        &:hover{
            color: #666666;
        }

        .b{
            font-size: 20px;
        }
    }
}

.box{
    background: #654321;

    #bgColor>.a;
}

.box2{
    #bgColor>.a>.b;
}

编译结果

.box {
  background: #654321;
  color: #333333;
}
.box:hover {
  color: #666666;
}
.box .b {
  font-size: 20px;
}
.box2 {
  font-size: 20px;
}

省略>写法
可以省略表示嵌套关系的大于号>。如 .a > .b 等同于 .a .b。

示例：

less语句

#bgColor(){
    background: #111111;

    .a{
        color: #2222222;

        &:hover{
            color: #333333;
        }

        .b{
            font-size: 20px;
        }
    }
}

.box{
    background: #444444;

    #bgColor .a;
}

.box2{
    #bgColor .a .b;
}

编译结果

.box {
  background: #444444;
  color: #2222222;
}
.box:hover {
  color: #333333;
}
.box .b {
  font-size: 20px;
}
.box2 {
  font-size: 20px;
}

9. 作用域

什么是作用域？

Less中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。

示例：

less语句

@color: #111111;

.class1{
    width: 10px;
    .class2{
        color: @color;
    }
    @color: #222222;
}

编译结果

.class1 {
  width: 10px;
}
.class1 .class2 {
  color: #222222;
}

10. 引入(@import)

10.1 基础语法

1、什么是引入？ 你可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用!

2、注意：
1 . .less文件可以引用其它.less文件，可以使用它的变量，也可以使用它的类进行混入。
2 . .less文件可以引用.css文件，但是不能使用它的类进行混入。而且.css文件的样式不会被复制到编译后的css文件中，而只是保留它的导入语句。

◎示例1：

common.less

.class1{
    color: 333333;
}

@bg: #FBFBFB;

index.less

@import "./common.less";

.box{
    background: @bg;

    .class1;
}

编译结果 index.css

.class1 {
  color: 333333;
}
.box {
  background: #fbfbfb;
  color: 333333;
}

◎示例2：

global.css

.active{
    color: #666666;
}

index.less

@import "global.css"; //引入css文件时，不会复制其样式，只保留其导入语句。

编译结果

index.css

@import "global.css";

◎示例3：

global.css

.active{
    color: #666666;
}

index.less

@import "global.css";

.box{
    //.active;  //不能混入.css文件中的类
}

10.2 引入模式

3、引入模式

导入less文件时，可以添加一个参数，来设置导入模式。语法：

@import (导入模式) "xxx.less";
参数说明
once默认，只包含一次。
reference使用Less文件但不输出。
inline在输出中包含源文件但不加工它。
less将文件作为Less文件对象，无论是什么文件扩展名。
css将文件作为CSS文件对象，无论是什么文件扩展名。
multiple允许引入多次相同文件名的文件。

◎示例1：refrence参数。

common.less

@bg: #FBFBFB;

.class1{
    color: 333333;
}

index.less

@import  (reference) "./common.less"; //reference方式

.box{
    background: @bg;
    .class1;
}

编译结果

index.css

.box {
  background: #fbfbfb;
  color: 333333;
}

结论：以reference方式引入less文件时，它的样式不会输出到编译后的css文件中。

◎示例2：inline参数。

common.less

@bg: #FBFBFB;

.class1{
    color: 333333;
}

index.less

@import  (inline) "./common.less"; //inline方式

.box{
    padding: 10px;
   // background: @bg;
   // .class1;
}

编译结果

index.css

@bg: #FBFBFB;

.class1{
    color: 333333;
}
.box {
  padding: 10px;
}

结论：以inline方式引入less文件时，不能使用它里面的类进行混入，也不能使用它的变量。而且它的类、变量被会原样输出到编译后的css文件中。

◎示例3：less参数。

global.css

.active{
    font-size: 10px
}

index.less

@import (less) "./global.css";

.box{
    .active;
}

编译结果

index.css

.active {
  font-size: 10px;
}
.box {
  font-size: 10px;
}

结论：以less方式引入其它样式文件时，不管它后缀名是什么，都当作less来进行处理。

示例4：css参数。

common.less

@bg: #FBFBFB;

.class1{
    color: 333333;
}

index.less

@import (css) "./common.less";
.box{
    //background: @bg;
    //.class1;
}

编译结果

index.css

@import "common.less";

示例5：multiple参数。

common.less

@bg: #FBFBFB;

.class1{
    color: 333333;
}

index.less

@import (multiple) "./common.less";  
@import (multiple) "./common.less";
@import (multiple) "./common.less";
.box{
    background: @bg;
    .class1;
}

编译结果

index.css

.class1 { 
  color: 333333;
}
.class1 {
  color: 333333;
}
.class1 {
  color: 333333;
}
.box {
  background: #fbfbfb;
  color: 333333;
}

结论：以multiple方式引入less文件时，可以引入多次名字相同的文件。如果是同一个文件，则编译后，它的样式会重复输出多次。

11. 关键字(!important)

什么是 !important 关键字？在调用的混合集后面追加!important关键字，可以使混合集里面的所有属性都继承!important。

◎示例：

less语句

.foo(@margin: 10px; @padding: 20px){
    margin: @margin;
    padding: @padding;
}

.class1{
    .foo();
}

.class2{
    .foo() !important;
}

编译结果

.class1 {
  margin: 10px;
  padding: 20px;
}
.class2 {
  margin: 10px !important;
  padding: 20px !important;
}

12. 条件表达式

常用运算符：<、>、>=、=、=<、true

注意： 1、运算符的左右需要空格。

应用场景：

1 . 带条件的混合

when关键字：指定混合的生效条件。

2 . 类型检查函数

可以基于的得类型来匹配函数。

常用的类型检查函数： iscolor、 isnumber、 isstring、 iskeyword、 isurl

3 . 单位检查函数

检查一个值除了数字是否是一个特点的单位。

常用的单位检查函数： ispixel、 ispercentage、 isem、 isunit

◎示例1：带条件的混合。

less语句

.mixin (@a) when (lightness(@a) >= 50%){
    background-color: white;
}

.mixin (@a) when (lightness(@a) < 50%){
    background-color: black;
}

.mixin (@a){
    color: @a;
}

.class1{
    .mixin(#ddd)
}
.class2{
    .mixin(#555)
}

编译结果

.class1 {
  background-color: white;
  color: #dddddd;
}
.class2 {
  background-color: black;
  color: #555555;
}

分析：

lightness()函数：返回颜色的亮度值，0%~100%。

◎示例2：类型检查函数。

less语句

.mixin (@a) when (isnumber(@a)){
	background-color: white;
}

.mixin (@a) when (iscolor(@a)){
	background-color: black;
}

.mixin (@a){
	color: @a;
}

.class1{
	.mixin(#333333)
}
.class2{
	.mixin(111)
}

编译结果

.class1 {
  background-color: black;
  color: #333333;
}
.class2 {
  background-color: white;
  color: 111;
}

◎ 示例3：单位检查函数。

less语句

.mixin (@a) when (ispixel(@a)){
    padding-left:10px;
}

.mixin (@a) when (ispercentage(@a)){
    padding-right:10px;
}

.mixin (@a){
    width: @a;
}

.class1{
    .mixin(10px)
}
.class2{
    .mixin(10%)
}

编译结果

.class1 {
  padding-left: 10px;
  width: 10px;
}
.class2 {
  padding-right: 10px;
  width: 10%;
}

13. 循环(loop)

在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。

语法：
1、使用when关键字 指定循环条件。
2、必须设置退出循环的条件。
3、递归调用。

◎示例1：

less语句

.loop (@counter) when (@counter>0){
    width:(10px * @counter); //每次调用时产生的样式代码
	
    .loop((@counter - 1)); //递归调用自身
}

.box{
    .loop(5); //调用循环
}

编译结果

.box {
  width: 50px;
  width: 40px;
  width: 30px;
  width: 20px;
  width: 10px;
}

◎示例2：

less语句

.loop (@counter) when (@counter>0){
    h@{counter} {
        font-size: @counter*10px; //每次调用时产生的样式代码
    } 

    .loop((@counter - 1)); //递归调用自身
}

.box{
    .loop(6); //调用循环
}

编译结果

.box h6 {
  font-size: 60px;
}
.box h5 {
  font-size: 50px;
}
.box h4 {
  font-size: 40px;
}
.box h3 {
  font-size: 30px;
}
.box h2 {
  font-size: 20px;
}
.box h1 {
  font-size: 10px;
}

14. 合并属性

1、+号：合并属性时，使用逗号分割。

说明：在需要合并的属性的 : 的前面加上 + 就可以完成合并，合并以 , 分割顺序。

2、+_号：空合并属性时，使用空格分隔。

◎示例1：+号。

less语句

.mixin(){
    box-shadow+: inset 0 0 10px #555;
}
.myclass{
    .mixin();
    box-shadow+: 0 0 20px black;
}

编译结果

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

◎示例2：+_号

less语句

.a(){
    background+_: #333333;
    background+_: url("./xxx.png");
}

.class1{
    .a();
}

编译结果

.class1 {
  background: #333333 url("xxx.png");
}

15. 函数库(function)

1、其他函数

函数作用
color()函数解析颜色，将代表颜色的字符串转换为颜色值。
convert()函数将数字从一种类型转换到另一种类型。
data-uri()函数将一个资源内嵌到样式文件，如果开启了ieCompat选项，而且资源文件的体积过大，或者是在浏览器中使用，则会使用url()进行回退。如果没有指定MIME，则Node.js会使用MIME包来决定正确的MIME。
default()函数只能边界条件中使用，没有匹配到其他自定义函数( mixin )的时候返回true，否则返回false。
unit()函数移除或者改变属性值的单位。

1 . convert()函数

参数1：转换前的单位
参数2：转换后的单位

转换前的单位和转换后的单位 必须是兼容的，即同一种类型的单位才可以相互转换。

单位分类：
1）长度单位：m、cm、mm、in、pt、px、pc
2）时间单位：s、ms
3）角度单位：rad 弧度、deg 度、grad 梯度、turn 圆

2 . data-uri()函数

作用：将引入的资源转换为base64字符串，内嵌到html文件中。
注意：Koala软件 无法处理data-uri()函数，可以使用其它工具，如WindLess。

3 . default()函数

作用：混入时，如果没有找到名字匹配的规则集，则使用default()函数定义的规则集。

4 . unit()函数

  • 如果只传入一个参数，而且是带单位的值，则会移除单位，只保留数字。
  • 如果传入两个参数，第一个是带单位的值，第二个是另一个单位，则会进行单位的转换。
  • 如果传入两个参数，第一个是不带单位的值，第二个是单位，则会将数字和单位合并。

示例1：color()函数。

.class{
    background: color("#333333");
}

.class {
  background: #333333;
}

示例2：convert()函数。

.box{
    width: convert(10cm, px);
}

.box {
  width: 377.95275591px;
}

示例3：data-uri()函数。

image.png

image.png

示例4：default()函数。

//.x一共有三个匹配模式：1、2、default
.x(1){
    padding: 10px;
}
.x(2){
    padding: 20px;
}
.x(@foo) when (default()){
    padding: @foo;
}

.box1{
    .x(1)
}

.box2{
    .x(30px)
}

--->

.box1 {
  padding: 10px;
}
.box2 {
  padding: 30px;
}

示例5：default()函数。

.x(@foo) when (ispixel(@foo)){
    width: @foo;
}
.x(@foo) when not(default()){
    width: (@foo/2);
}

.box1{
    .x(100px);
}
.box2{
    color: red;
    .x(100cm);
}

--->

.box1 {
  width: 100px;
  width: 50px;
}
.box2 {
  color: red;
}

示例6：unit()函数。

.box{
    width: unit(10px, cm);
    height: unit(20, px);
    padding: unit(30px);
}

--->

.box {
  width: 10cm;
  height: 20px;
  padding: 30;
}

2、字符串函数

1 . escape()函数
将输入字符串中的url特殊字符进行编码处理。
不转移的编码：, / ? @ & + - ' ~ ! $
转义的编码：# ^ ( ) { } | : > < ; ] [ =

2 . e()函数
作用：避免编译，即传入e()函数的内容不需要使用less进行编译，原样输出即可。

e()函数 可以使用 波浪号~ 代替。
即：e('不希望被less编译的内容') === ~'不希望被less编译的内容'

3 . %()函数
函数%(string, arguments ...)格式化一个字符串。

参数1：指定格式化规则。不同的占位符表示不同的格式化规则。
其它参数：按照参数1指定的规则进行字符串格式化，其它参数会被格式化、合并到一个字符串中。

image.png

4 . replace()函数
用另一个字符串替换文本。

◎示例1：escape()函数。

div{
    a: escape('#-^-(-)-{-}-|-:->-<-;-]-[-=')
}

--->

div {
  a: %23-%5E-%28-%29-%7B-%7D-%7C-%3A-%3E-%3C-%3B-%5D-%5B-%3D;
}

◎示例2：e()函数。

div{
    filter: e("ms:alwaysHasltsOwnSyntax.For.Stuff()");
    
    //下面的语法等同于上面的语法
    //filter: ~"ms:alwaysHasltsOwnSyntax.For.Stuff()";
}

--->

div {
  filter: ms:alwaysHasltsOwnSyntax.For.Stuff();
}

◎示例3：e()函数。

.box1{
    width: calc(100px-10px);
}

.box2{
    width: e('calc(100px-10px)');
    //等同于
    //width: calc(~'100px-10px');
}

--->

.box1 {
  width: calc(90px);
}
.box2 {
  width: calc(100px-10px);
}

分析：在使用css calc()函数时，less默认会将传给calc()函数的表达式进行编译，然后再将编译后的结果传给css文件中的calc()函数，很明显这是错误的。此时，可以使用e()函数来避免less编译。

◎实例3：%()函数。

.box1{
    font-family: %("%a %a", "Microsoft", "YaHei");
}
.box2{
    font-family: %("%A %a", "Microsoft", "YaHei");
}

--->

.box1 {
  font-family: ""Microsoft" "YaHei"";
}
.box2 {
  font-family: "%22Microsoft%22 "YaHei"";
}

◎示例4：replace()函数。

.box{
    color: replace("hello, world", "world", "less");
}

--->

.box {
  color: "hello, less";
}

3、长度相关函数

1 . length()函数
返回集合中的值的条数。

2 . extract()函数
返回集合中指定索引的值。

◎示例1：length()函数。

length(1px solid #333333)

--->

3

@list: "banana", "tomato", "potato", "peach";
n: length(@list);

--->

n: 4;

◎示例：extract()函数。

Example: `extract(8px dotted red, 2);`

Output: `dotted`

Example:

@list: apple, pear, coconut, orange;
value: extract(@list, 3);

Output:

value: coconut;

4、数学函数

1.ceil()函数
向上取整。不管小数位是多少，都加+1，向上取整。

2.floor()函数
向下取整

3.percentage()函数
将浮点数转换为百分比

4.round)函数
取整和四舍五入

5.sqrt()函数
计算一个数的平方根,原样保持单位。

6.abs()函数数
计算数字的绝对值，原样保持单位。

7.sin()函数
正弦函数

8.asin()函数
反正弦函数

9.cos()函数
余弦函数

10.acos)函数
反余弦函数

11.tan()函数
正切函数

12.atan()函数
反正切函数

13.pi()函数
返回π(pi);

14.pow()函数
乘方运算

15.mod)函数
取余运算

16.min()函数
最小值运算

17.max()函数
最大值运算

5、类型函数

函数作用
isnumber()函数如果一个值是一个数字，返回‘真(true)",否则返回"假(false)"
isstring()函数如果一个值是一个字符串，返回真(true)",否则返回′假(false)"
iscolor()函数如果一个值是一个颜色，返回'真(true)",否则返回′假(false)"
iskeyword()函数如果一个值是一个关键字，返回"真(true)',否则返回"假(false)".
isurl()函数如果一个值是一个url地址，返回'真(true)",否则返回'假(false)
ispixel()函数如果一个值是带像素长度单位的数字，返回"真(true)',否则返回'假(false)".
isem()函数如果一个值是带em长度单位的数字，返回"真(true)",否则返回'假(false)
ispercentage()函数如果一个值是带百分比单位的数字，返回'真(true)',否则返回'"假(false)"'.
isunit()函数如果一个值是带指定单位的数字，返回'真(true)",否则返回'假(false)".

6、颜色值定义函数

函数作用
rgb()函数通过十进制红色，绿色，蓝色三种值(RGB)创建不透明的颜色对象。
rgba()函数通过十进制红色，绿色，蓝色，以及alpha四种值(RGBA)创建带alpha透明的颜色对象。
argb()函数创建格式为#AARRGGBB的十六进制(hex representation)颜色(注意不是#RRGGBBAA ! ).
hls()函数通过色相(hue)，饱和度(saturation)，色调(value)三种值(HSV)创建不透明的颜色对象。
hsla)函数通过十进制红色，绿色，蓝色，以及alpha四种值(RGBA)创建带alpha透明的颜色对象。
hsv()函数通过色相(hue)，饱和度(saturation)，色调(value)三种值(HSV)创建不透明的颜色对象。
hsva()函数通过色相(hue)，饱和度(saturation)，色调(value)，以及alpha 四种值(HSVA)创建透明的颜色对象。

7、颜色值通道提取函数

函数作用
hue()函数从HSL色彩空间中提取颜色对象的色相值。
saturation()函数从HSL色彩空间中提取颜色对象的饱和度值。
lightness()函数从HSL色彩空间中提取颜色对象的亮度值。
hsvhue()函数从HSV色彩空间中提取颜色对象的色相值。
hsvsaturation()函数从HSV色彩空间中提取颜色对象的饱和度值。
hsvvalue()函数从色彩空间中提取颜色对象的色调值。
red()函数提取颜色对象的红色值。
green()函数提取颜色对象的绿色值。
blue()函数提取颜色对象的蓝色值。
alpha()函数提取颜色对象的透明值。
luma()函数计算颜色对象luma的值（亮度的百分比表示法)。
luminance()函数计算没有伽玛校正的亮度值。

8、颜色值运算函数

函数作用
saturate()函数增加一定数值的颜色饱和度。
desaturate()函数降低一定数值的颜色饱和度。
lighten()函数增加一定数值的颜色亮度。
darken()函数降低一定数值的颜色亮度。
fadein()函数降低颜色的透明度(或增加不透明度),令其更不透明。
fadeout()函数增加颜色的透明度(或降低不透明度)，令其更透明。
fade()函数给颜色（包括不透明的颜色）设定一定数值的透明度。
spin()函数任意方向旋转颜色的色相角度(hue angle)。
mix()函数根据比例混合两种颜色，包括计算不透明度。
greyscale()函数完全移除颜色的饱和度，与desaturate(@color, 100%)函数效果相同。
contrast()函数选择两种颜色相比较，得出哪种颜色的对比度最大就倾向于对比度最大的颜色。

9、颜色混合函数

函数作用
multiply)函数分别将两种颜色的红绿蓝(RGB)三种值做乘法运算，然后再除以255，输出结果是更深的颜色。（译注:对应Photoshop中的“变暗/正片叠底"。)
screen()函数与multiply()函数效果相反，输出结果是更亮的颜色。（译注:对应Photoshop中的"变亮/滤色”。)
overlay()函数结合multiply)与screen()两个函数的效果，令浅的颜色变得更浅，深的颜色变得更深。（译注:对应Photoshop中的“叠加"。)注意:输出结果由第一个颜色参数决定。
softlight()函数与overlay()函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。（译注:对应Photoshop中的“柔光”。)
hardlight(函数与overlay()函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定。（译注:对应Photoshop中的“强光/亮光/线性光/点光"。)
difference()函数从第一个颜色值中减去第二个（分别计算 RGB三种颜色值)，输出结果是更深的颜色。（译注:对应Photoshop中的“差值/排除"。)
exclusion()函数效果与difference()函数效果相似，只是输出结果差别更小(lower contrast)。(译注:对应Photoshop中的“差值/排除"。)
average()函数分别对 RGB的三种颜色值取平均值,然后输出结果。
negation()函数与difference()函数效果相反，输出结果是更亮的颜色。请注意∶效果相反不代表做加法运算。

总结

1 . 本视频教程的优缺点：
a）知识点比较齐全完整，但是有些概念讲得不够清楚。
b）没有实战，不知道知识点应该如何在实战中使用。
c）官网文档写的比较好。

官方链接

LESS官方网站
英文 www.lesscss.org/
中文 less.bootcss.com/

百度脑图

菜鸟工具-RGB转16进制工具

视频教程

LESS教程 ★

Web前端Less经典教程

黑马面面移动端布局开发-rem+less适配码云部署发布静态网站git上传摹客/蓝湖协作平台使用-pink老师公开课

学习资料

练习代码：H:\学习课程\ediary日记\学习课程\less-2\练习代码\less-demo

H:\学习课程\ediary日记\学习课程\less

avatar
文章
阅读
粉丝
相关推荐
2. Less 变量
718阅读
 · 
1点赞
1. 初见 Less
624阅读
 · 
1点赞
Webpack处理less模块的细节
1.5k阅读
 · 
10点赞
你不知道的Less：使用Less生产原子化CSS！
1.5k阅读
 · 
25点赞
Less 和 SCSS，哪一个更适合你？
8.7k阅读
 · 
84点赞
vue使用scss、less切换主题（scss篇），进来就是赚到
7.2k阅读
 · 
41点赞
less深入指南
703阅读
 · 
6点赞
Sass(Scss)、Less的区别与选择 + 基本使用
7.5k阅读
 · 
66点赞
前端换肤方案 - element+less无感换肤（无需页面刷新）
10k阅读
 · 
201点赞
【Less】Less使用总结
1.2k阅读
 · 
16点赞

友情链接：