1.Less介绍

1.1预处理器含义

CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等);
CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处;

1.2Less含义
Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征;
它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展;

1.3常见的预处理器

Less;

                        ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1165372/1596105623165-8f7cecf1-88f1-4838-81ac-c6c1a0547897.png#height=305&id=zAqKc&margin=%5Bobject%20Object%5D&name=image.png&originHeight=541&originWidth=756&originalType=binary&size=51244&status=done&style=none&width=426)

Sass;

                  ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1165372/1596105673466-5c380d08-5c7c-4829-9006-4a4d970ede9b.png#height=303&id=xUIQq&margin=%5Bobject%20Object%5D&name=image.png&originHeight=567&originWidth=888&originalType=binary&size=49718&status=done&style=none&width=474)

Stylus;

                ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1165372/1596105733844-88c638b4-e48f-42ba-823e-14841fe521c5.png#height=231&id=e96by&margin=%5Bobject%20Object%5D&name=image.png&originHeight=231&originWidth=583&originalType=binary&size=20301&status=done&style=none&width=583)

1.4使用Less的原因

CSS的语法虽然简单, 但它同时也带来一些问题;
CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用;

造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念;

1.5Less的基本使用

1.5.1在浏览器中直接运行;

/*  
编写less文件-->引入less文件-->引入less.js-->运行
 1.1一定要先引入less.css再引入less.js;
 1.2如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效
*/

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

1.5.2提前预编译

编写less文件—>利用工具转换为css文件—>引入css文件;
常用工具:
- 考拉客户端: 考拉客户端
- 开源中国 :开源中国
构建工具配置loader自动编译
- 无需引入less.js, 无需在服务端运行;
  2.Less基础语法
  2.1 Less注释
在Less中既有单行注释//,又有多行注释/**/.

进行预处理时,单行注释会被忽略,不会在css文件中出现;

//这是第一个Less文件
/*
CSS预处理器Less
*/
.father {
background: #000;
width: 500px;
height: 500px;
.son {
  background: red;
  width: 300px;
  height: 300px;
}
}

/*
CSS预处理器Less
*/
.father {
background: #000;
width: 500px;
height: 500px;
}
.father .son {
background: red;
width: 300px;
height: 300px;
}

2.2 Less导入

@import "library"; // library.less
@import "typo.css";
//如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

2.3 Less变量

定义变量的格式
- less中定义变量的格式: @变量名称: 值;
- less中使用变量的格式: @变量名称;
和js一样可以将一个变量赋值给另外一个变量;
- 定义在{}外面的就是全局的变量, 什么地方都可以使用;
- 定义在{}里面的就是局部变量, 只能在{}中使用;
less中的变量是延迟加载的, 写到后面也能在前面使用;
和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响;
- 和js一样在访问变量时会采用就近原则; ```less @var: red;

page {

@var: white;

header {

color: @var; // white

} }

```less
@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

2.3.1变量插值

含义:
- 在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量;
- 如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式;
格式:
- @{变量名称}; ```less @size: 200px; @w: width; @s: div;

@{s}{ @{w}: @size; height: @size; background: red; } //预处理后的css / div { width: 200px; height: 200px; background: red; } /

<a name="GJw7H"></a>
### 2.4 Less运算
- 算术运算符 `+`、`-`、`*`、`/` 可以对任何数字、颜色或变量进行运算;
- 计算的结果以最左侧操作数的单位类型为准.如果单位换算无效或失去意义,则忽略单位.
- 乘法和除法单位不作转换;
- 为了与 CSS 保持兼容，`calc()` 并不对数学表达式进行计算,在嵌套函数中会计算变量和数学公式的值;
<a name="gkVdP"></a>
### 2.5 Less混合
- 将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可;
- 在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来;
- 本质就是ctrl+c  --> ctrl + v;
- **如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码;**
- **如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码;**
```less
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father {
  width: 300px;
  height: 300px;
  background: deeppink;
  .center;
  .son {
    width: 200px;
    height: 200px;
    background: blue;
    .center();
  }
}
//预处理后的css代码
/*
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father {
  width: 300px;
  height: 300px;
  background: deeppink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
*/

.center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.father {
  width: 300px;
  height: 300px;
  background: deeppink;
  .center;

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

/*
.father {
  width: 300px;
  height: 300px;
  background: deeppink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
*/

调用mixins时，括号是可选的。在上面的例子中，语句.center();和.center;都做同样的事情。

2.5.1带参数的混合

.whc(@w,@h,@c) {
  width: @w;
  height: @h;
  background: @c;
}

// 这里就是带参数的混合
.box {
  .whc(200px,200px,deeppink);
}
//预处理后的css代码
/*
.box {
  width: 200px;
  height: 200px;
  background: deeppink;
}
*/

// 这里就是带参数的混合, 并且带默认值
.whc(@w:100px, @h:100px, @c:pink){
  width: @w;
  height: @h;
  background: @c;
}

.box {
  //.whc(@c: red);
  .whc();
}

2.5.2 可变参数

less中的…表示可以接收0个或多个参数;
如果形参列表中使用了…, 那么…必须写在形参列表最后;
less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参; ```less .animate(@name, @time, @mode, @delay){ //transition: @name @time @mode @delay; transition: @arguments; }

div { width: 200px; height: 200px; .animate(all,4s,linear,0s); } //预处理后的css代码 / div { width: 200px; height: 200px; transition: all 4s linear 0s; } /

<a name="kouxc"></a>
### 2.6 Less匹配模式
<a name="ixC8I"></a>
#### 2.6.1混合的匹配模式

-  就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合;
<a name="BJ6BU"></a>
#### 2.6.2通用的匹配模式

- 无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码;
- @_: 表示通用的匹配模式;
```less
//通用的匹配模式
.triangle(@_, @width, @color){
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}
//混合匹配模式
/*
.triangle(匹配符, 参数列表)
*/
.triangle(Top, @width, @color){
  border-width: @width;
  border-color: @color transparent transparent transparent;
}
.triangle(Right, @width, @color){
  border-width: @width;
  border-color: transparent @color transparent transparent;
}
.triangle(Down, @width, @color){
  border-width: @width;
  border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color){
  border-width: @width;
  border-color: transparent transparent transparent @color;
}

div{
  .triangle(Top, 80px, green);
  //.triangle(Right, 80px, green);
  //.triangle(Down, 80px, green);
  //.triangle(Left, 80px, green);

}
//预处理的css代码
/*
div {
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
  border-width: 80px;
  border-color: green transparent transparent transparent;
}
*/

3.层级结构

&作用：是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可；

如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器；

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

&::before {
  content: "";
}
;

.son {
  &:hover {
    background: skyblue;
  }

  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
}

编译后css代码如下: ```css .father { width: 300px; height: 300px; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.father::before { content: “”; }

.father .son { width: 200px; height: 200px; background: blue; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.father .son:hover { background: skyblue; }

<a name="yhv4j"></a>
## 4.Less继承
```less
.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/*
1.less中的继承和less中混合的区别
1.1使用时的语法格式不同
1.2转换之后的结果不同(混合是直接拷贝, 继承是并集选择器);
*/
.father:extend(.center){
  width: 300px;
  height: 300px;
  background: red;
  //.center;
  .son:extend(.center){
    width: 200px;
    height: 200px;
    background: blue;
    //.center;
  }
}

5.less条件判断

less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码;
when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断; ```less .size(@width,@height) when (@width = 100px) { width: @width; height: @height; }

// (),()相当于JS中的|| .size(@width,@height) when (@width = 100px), (@height = 100px) { width: @width; height: @height; }

// ()and()相当于JS中的&& .size(@width,@height) when (@width = 100px)and(@height = 100px){ width: @width; height: @height; }

.size(@width,@height) when (ispixel(@width)) { width: @width; height: @height; }

div { .size(100px, 100px); background: red; }

<a name="StRHT"></a>
## 6.Less函数

- 由于less的底层就是用JavaScript实现的,所以JavaScript中常用的一些函数在less中都支持;
<a name="gaksQ"></a>
### 6.1Less内置函数
<a name="ylk7m"></a>
#### 混杂方法
```less
    image-size("file.jpg"); // => 100px 50px
    image-width("file.jpg"); // => 100px
    image-height("file.jpg"); // => 50px

单位转换

    convert(9s, "ms"); // => 9000ms
    convert(14cm, mm); // => 140mm
    convert(8, mm); // => 8

列表

    @list: "A", "B", C, "D";
    length(@list); // => 4
    extract(@list, 3); // => C

数学

    ceil(2.1); // => 3 向上取整
    floor(2.1); // => 2 向下取整
    percentage(.3); // => 30% 转百分比
    round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
    sqrt(25cm); // => 5cm 取平方根
    abs(-5cm); // => 5cm 取绝对值
    pi(); // => 3.141592653589793 圆周率π
    max(3px, 42px, 1px, 16px); // => 42px

字符串

   replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"

判断类型

    isnumber(56px); // => true 是否含数字
    isstring("string"); // => true
    iscolor(#ff0); // => true
    iscolor(blue); // => true
    iskeyword(keyword); // => true
    isurl(url(...)); // => true
    ispixel(56px); // => true
    isem(7.8em); // => true
    ispercentage(7.8%); // => true
    isunit(4rem, rem); // => true 是否为指定单位
    isruleset(@rules); // => true 是否为变量

颜色操作

   增加饱和度
    saturate(color, 20%)
    减少饱和度
    desaturate(color, 20%)
    增加亮度
    lighten(color, 20%)
    减少亮度
    darken(color, 20%)
    降低透明度
    fadein(color, 10%)
    增加透明度
    fadeout(color, 10%)
    设置绝对不透明度(覆盖原透明度)
    fade(color, 20%)
    旋转色调角度
    spin(color, 10)
    将两种颜色混合，不透明度包括在计算中。
    mix(#f00, #00f, 50%)
    与白色混合
    tint(#007fff, 50%)
    与黑色混合
    shade(#007fff, 50%)
    灰度，移除饱和度
    greyscale(color)
    返回对比度最大的颜色
    contrast(color1, color2)

颜色混合

  每个RGB 通道相乘，然后除以255
    multiply(color1, color2);
    与 multiply 相反
    screen(color1, color2);
    使之更浅或更暗
    overlay(color1, color2)
    避免太亮或太暗
    softlight(color1, color2)
    与overlay相同，但颜色互换
    hardlight(color1, color2)
    计算每个通道(RGB)基础上的两种颜色的平均值
    average(color1, color2)

前端笔记

Less学习