一、Less语法

1.数字运算

1.使用Less运算写法完成px单位到rem单位的转换

思考：在px单位转换到rem单位过程中，哪项工作是最麻烦的？
答：除法运算。CSS不支持计算写法。
解决方案：可以通过Less实现

数字运算

移动web 05 - 图1

2.使用Less语法快速编译生成CSS代码

Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

移动web 05 - 图2

Easy Less :

vscode插件
作用：less文件保存自动生成css文件

移动web 05 - 图3

2.补充注释

单行注释

语法：// 注释内容
快捷键：ctrl + /

块注释

语法：/ 注释内容 /
快捷键： shift + alt + A

3.嵌套

移动web 05 - 图4

4.变量

移动web 05 - 图5

/* 修改网页的主题色 粉红色 字体颜色改  */
// 创建一个箱子 变量
@themeColor: pink;
// 字体颜色  灰色
@fontColor: #666;
// 内边距
@pad: 30px;
div {
  color: @fontColor;
  padding: @pad;
}
div {
  background-color: @themeColor;
  color: red;
  border: 1px solid @themeColor;
}
a {
  background-color: @themeColor;
  color: red;
  border: 1px solid @themeColor;
}
p {
  background-color: @themeColor;
  color: red;
  border: 1px solid @themeColor;
}
button {
  background-color: @themeColor;
  color: red;
  border: 1px solid @themeColor;
}

/* 修改网页的主题色 粉红色 字体颜色改  */
div {
  color: #666;
  padding: 30px;
}
div {
  background-color: pink;
  color: red;
  border: 1px solid pink;
}
a {
  background-color: pink;
  color: red;
  border: 1px solid pink;
}
p {
  background-color: pink;
  color: red;
  border: 1px solid pink;
}
button {
  background-color: pink;
  color: red;
  border: 1px solid pink;
}

5.混合

移动web 05 - 图6

// 创建一个混合
// 自己定义一个名  点 . +  名称 + () + { } +花括号封装你的代码
.center(){
    display: flex;
    justify-content: center;
    align-items: center;
}
.BCcolor(){
    background-color: pink;
    border: 1px solid black;
}
div{
    .center();
    .BCcolor();
}
// 创建一个混合
.eleCenter() {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .borderColor() {
    border: 1px solid blue;
    color: blue;
  }
  div {
    // 使用混合
    .eleCenter();
    .borderColor();
  }
  p {
    .eleCenter();
  }
  a {
    .eleCenter();
    .eleCenter();
  }

div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
  border: 1px solid black;
}
div {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid blue;
  color: blue;
}
p {
  display: flex;
  align-items: center;
  justify-content: center;
}
a {
  display: flex;
  align-items: center;
  justify-content: center;
}

6.用less写一个筛子案例

移动web 05 - 图7

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-筛子.html</title>
    <link rel="stylesheet" href="./06.筛子.css" />
  </head>
  <body>
    <ul>
      <li>
        <div></div>
      </li>
      <li>
        <div></div>
        <div></div>
      </li>
      <li>
        <div></div>

        <div></div>
        <div></div>
      </li>
      <li>
        <nav>
          <div></div>
          <div></div>
        </nav>
        <nav>
          <div></div>
          <div></div>
        </nav>
      </li>
      <li>
        <nav>
          <div></div>
          <div></div>
        </nav>
        <nav><div></div></nav>
        <nav>
          <div></div>
          <div></div>
        </nav>
      </li>
      <li>
        <nav>
          <div></div>
          <div></div>
        </nav>
        <nav>
          <div></div>
          <div></div>
        </nav>
        <nav>
          <div></div>
          <div></div>
        </nav>
      </li>
    </ul>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
}
ul {
  list-style: none;
  width: 926px;
  height: 100px;
  margin: 100px auto;
  display: flex;
  justify-content: space-between;
}
li {
  width: 100px;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  // 选中 li 1 、2 、3
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &:nth-child(2) {
    display: flex;
    justify-content: space-between;
    div:nth-child(2) {
      // 设置子项在侧轴上的对齐方式
      align-self: flex-end;
    }
  }
  &:nth-child(3) {
    display: flex;
    justify-content: space-between;
    div:nth-child(2) {
      align-self: center;
    }
    div:nth-child(3) {
      align-self: flex-end;
    }
  }
  &:nth-child(4) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    nav {
      display: flex;

      justify-content: space-between;
    }
  }
  &:nth-child(5) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    nav {
      display: flex;
      justify-content: space-between;
      &:nth-child(2) {
        justify-content: center;
      }
    }
  }
  &:nth-child(6) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    nav {
      display: flex;
      justify-content: space-between;
    }
  }

  div {
    background-color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}

二、媒体查询

可根据当前屏幕的宽度不同，去加载对应的一套css代码

媒体查询初步体验代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-媒体查询体验.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* 
      css语法
      根据屏幕宽度的不同， 去加载对应css代码

      当屏幕的宽度 = 800px  颜色 黑色
      当屏幕的宽度 = 1000px 颜色 红色
      */
      @media screen and (width: 800px) {
        /* 加载这个大括号里面的一坨代码 */
        body {
          background-color: black;
        }
      }

      @media screen and (width: 1000px) {
        /* 加载这个大括号里面的一坨代码 */
        body {
          background-color: red;
        }
      }
    </style>
  </head>
  <body></body>
</html>

三、思维导图

移动web 05 - 图8

移动web 05 - 图9

移动web 05 - 图10