1.Less中的运算

1.1 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。例：

// 所有操作数被转换成相同的单位 
@conversion-1: 5cm + 10mm; // 结果是 6cm 
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm 
//conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px 
// example with variables @base: 5%; 
@filler: @base * 2; // 结果是 10% 
@other: @base + @filler; // 结果是 15%

1.2 乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

你还可以对颜色进行算术运算：

@color: (#224488 / 2); // 结果是 #112244 
background-color: #112244 + #111; // 结果是 #223355

2.Less中的混合

2.1 什么是less中的混合(Mix in) 将需要重复使用的代码封装到一个类中,在需要的地方直接调用即可在预处理的时候会将封装好的类直接拷贝过来
2.2 注意点:

2.2.1 如果混合名称后面没有（）,那么在预处理的时候,保留混合的代码到css文件中
2.2.2 如果混合名称后面有（）,那么在预处理的时候,不会保留混合的代码css文件中

<html>
<head>
    <title>LESS Mixins</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="./css/06.less中的混合.css">
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>


.center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.father {
  .center();
  width: 300px;
  height: 300px;
  background-color: red;

  .son {
    .center();
    width: 200px;
    height: 200px;
    background-color: blue;
  }
}

3.less中的混合参数

/*
这里是带参数的混合
.which(@w,@h,@c) {
  width: @w;
  height: @h;
  background: @c;
}*/

/*
这里是带参数混合加上指定默认值
*/
//指定默认值:在形参后面加上:值
.which(@w:100px,@h:100px,@c:green) {
  width: @w;
  height: @h;
  background: @c;
}

.box1 {
  // 给指定的形参传递值
 .which(@c:yellow);
}

.box2 
{
  .which(300px,200px,tomato);
}

4.less中的可变混合参数

1.less中的arguments和js中的arguments一样可以接收传递进来的多个参数如果在形参列表中使用了...,那么必须写在形参最后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08.less可变混合参数</title>
    <link rel="stylesheet" href="css/08.less可变混合参数.css">
</head>
<body>
<div></div>
</body>
</html>


.animate(@name,@time,@mode,@delay,...) {
  transition: @arguments;
}

div {
  width: 200px;
  height: 300px;
  background-color: red;
  //transition: all 4s linear 0s;
  //.animate(width, 4s, linear, 0s);
  .animate(width, 4s, linear, 0s);
}

div:hover {
  width: 400px;
  height: 400px;
  background-color: red;
}

/*
使用参数传递
.animate(@name,@time,@mode,@delay) {
  transition: @name @time @mode @delay;
}*/
/*
使用arguments传递参数
.animate(@name,@time,@mode,@delay) {
  transition: @arguments;
}*/
/*
传递多个参数
.animate(...) {
  transition: @arguments;
}*/
/*
指定必须传递参数
.animate(@name,@time,...) {
  transition: @arguments;
}
*/

5.less中混合的匹配模式

混合的匹配模式就是通过混合的第一个字符串传参,来确定要执行哪一个同名的混合例如HTML代码:

制作三角形为例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09.less中的混合匹配模式</title>
    <link rel="stylesheet" href="css/09.less中的混合匹配模式.css">
    <!--<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 0;
            height: 0;
            border-width: 80px;
            border-style: solid solid solid solid;
            border-color: tomato transparent transparent transparent;
        }-->
    </style>
</head>
<body>
<div></div>
<script>

</script>
</body>
</html>

例如css代码：

普通的匹配模式
/*
.triangle() {
  width: 0;
  height: 0;
  border-width: 40px;
  border-style: solid solid solid solid;
  border-color: red transparent transparent transparent;
}
*/
/*.triangle(@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: @color transparent transparent transparent;
}*/
/*
.triangle(Down,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: @color transparent transparent transparent;
}


.triangle(Bottom,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: transparent transparent @color transparent;
}


.triangle(Right,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: transparent @color transparent transparent;
}



.triangle(Left,@width,@color) {
  width: 0;
  height: 0;
  border-width: @width;
  border-style: solid solid solid solid;
  border-color: transparent transparent transparent @color;
}
*/


/*
@_通用的匹配模式
*/
.triangle(@_,@width,@color){
  width: 0;
  height: 0;
  border-style: solid;
}

.triangle(Bottom, @width, @color) {
  border-width: @width;
  border-color: @color transparent transparent transparent;
}

.triangle(Left, @width, @color) {
  border-width: @width;
  border-color: transparent @color transparent transparent;
}

.triangle(Top, @width, @color) {
  border-width: @width;
  border-color: transparent transparent @color transparent;
}

.triangle(Right, @width, @color) {
  border-width: @width;
  border-color: transparent transparent transparent @color;
}

Less学习笔记(四）

1.Less中的运算

2.Less中的混合

3.less中的混合参数

4.less中的可变混合参数

5.less中混合的匹配模式