less

定义

less是一个CSS预处理器，CSS预处理器（less，scss，stylues，技术名词）

注意点：

我们写样式代码，直接写在less文件中
通过插件来把less文件编译成我们熟悉的CSS文件
网页中引入编译好的CSS文件

目标

使用less语法快速编译生成css代码，提高我们编写CSS的效率

使用less的过程

新建一个less文件，后缀名为.less
会按照less的语法要求在less文件中编写代码
通过 easy less vscode插件来编译less文件

4. 会生成对应的CSS文件

在网页中直接引入编译好的CSS文件即可

语法

注释

单行注释

语法：//注释内容

快捷键：Ctrl+/

块注释

语法：/*注释内容 */

快捷键：Ctrl+shift+/

变量

概念：会变化的数据

作用：把一些CSS的属性设置在一个地方，实现一改全改的

步骤：

定义变量，固定语法：@任意的名称（有语义的英文）

使用变量

代码如下

/* 统一设置主题颜色 */
@theme-color: gray;

/* 统一设置网页字体的大小 */
@font-size: 200px;

div {
  color: @theme-color;
  font-size: @font-size;
}
p {
  color: red;
  font-size: @font-size;
}
section {
  background-color: @theme-color;
  font-size: @font-size;
}

编译为

div {
  color: gray;
  font-size: 200px;
}
p {
  color: red;
  font-size: 200px;
}
section {
  background-color: gray;
  font-size: 200px;
}

运算

作用：使用less运算写法完成px单位到rem单位的转换 ( 默认的CSS不支持运算，使用calc即可 )

步骤：加减乘直接书写计算表达式，除法要添加小括号或者.

代码如下

/* 符号两边要空格隔开 ，才可以在CSS中生成值*/
div {
  width: 100px - 50px;
  width: 100px * 3px;
  height: 200px - 100px;
  height: (300px / 100px);
}

编译为

div {
  width: 50px;
  width: 300px;
  height: 100px;
  height: 3px;
}

混合mixin

作用：把一堆相同的代码封装到一起方便使用

分类

无参数定义

.混合名() {

封装CSS的代码

}

代码如下

/* 1.定义一个mixin */ 
   .aaaa() {
    background-image: url(1.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
   div {
    //  A使用mixin
    .aaaa();
    background-position: -300px, 30px;
  }
   /* B使用mixin*/
   p {
    .aaaa();
    background-position: -400px, 60px;
   }
   /* C使用mixin */
   a {
    .aaaa();
    background-position: -50px, 100px;
   }

编译为

/* 1.定义一个mixin */
div {
  background-image: url(1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: -300px, 30px;
}
/* B使用mixin*/
p {
  background-image: url(1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: -400px, 60px;
}
/* C使用mixin */
a {
  background-image: url(1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: -50px, 100px;
}

有参数定义

.混合名(@参数1：参数的默认值，@参数2：参数的默认值) {

封装的代码

}

/* 1 定义一个mixin */
.aaaaaa(@a1,@a2) {
  /* 存放你想要用到一坨代码 */
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;

  /* 背景图片的位置 */
  background-position: @a1 @a2;
}
div {
  // 使用有参数mixin
  // .aaaaaa();
  // background-position: -300px 30px;
  /* ================== */
  .aaaaaa(-300px,30px);
}
p {
  .aaaaaa(-400px,60px)
}
span {
  .aaaaaa(-50px, 100px)
}

编译为


div {
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  /* 背景图片的位置 */
  background-position: -300px 30px;
}
p {
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  /* 背景图片的位置 */
  background-position: -400px 60px;
}
span {
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  /* 背景图片的位置 */
  background-position: -50px 100px;
}

嵌套

作用：快速生成后代选择器

传统的CSS嵌套

less中的嵌套

less 嵌套中后代变成子代选择器加 >

/* less中的嵌套   */
.box {
  p {
  }
  > section {
    #header {
      button {
        color: #000;
      }
    }
  }
  a {
    img {
    }
  }
}

编译为

/* less中的嵌套  */

.box > section #header button {

 color: #000;

}

错误写法

div{
  // 
  p{
    // 肯定错误
  }
  >button{
    background-color: red;
  }
}

编译为

div > button {
  background-color: red;
}

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

// less中的伪类
.father {
  color: red;
  &:hover {
    color: yellowgreen;
  }
}
//less中的伪元素
div {
  height: 200px;
  background-color: lawngreen;
  // ::before{ 错误的
  &::before {
    // 正确 要加上一个 & 连接
    content: 'less实现的伪元素';
  }
}

编译为

/* less中的伪类 */
.father {
  color: red;
}
.father:hover {
  color: yellowgreen;
}

/* less中的伪元素 */
div {
  height: 200px;
  background-color: lawngreen;
}
div::before {
  /* ：：前面不能加空格，否则语法错误 */
  content: 'less实现的伪元素';
}