更方便的css预处理器 --- less 详解

一、原生CSS

1、原生CSS变量使用

• 定义变量：--变量名=参数
• 变量使用：var(--变量名)

.d1 {
    /* 定义变量 */
  --bgColor: red;
    
	/* 使用变量 */
  background-color: var(--bgColor);
}

2、原生CSS默认变量参数

css变量的默认参数，var(变量, 默认参数)

• 如果传递了参数， 就使用你的参数
• 如果没有传递参数，就使用 默认的参数

.d1 {
	background-color: var(--bgColor, aqua);  /* 使用默认参数 */
}

.d1 {
    --bgColor: red;
	background-color: var(--bgColor, aqua);  /* 使用变量 */
}

3、css变量拼接

可以类似 JS 中的变量拼接

.d1 {
  /* 1 声明变量 */
  --borderWidth: 10px;
  /* 2 使用变量 */
  border: var(--borderWidth) solid red; /* 第一钟拼接	 */
}

.d2::after {
  --msg: " 太帅了！！！ ";
  content: var(--msg) "-------";  /* 第二种拼接 */
}

4、css计算calc

可以将不同单位的数值进行计算

当然也可以进行变量计算 calc( var(--xxx) + var(--yyy) )

注意：

• calc中间的运算符左右两边都得要空格 calc( x + y)

.box {
  /* 宽度：一行宽度的 50% - 200px */
  width: calc(50% - 200px);
  height: 300px;
  background-color: aqua;
}

.box {
  --halfWidth: 50%;
  /* 宽度：一行宽度的 50% - 200px */
  width: calc(var(--halfWidth) - 200px);
  height: 300px;
  background-color: aqua;
}

5、原生CSS 变量的作用域

即css变量的作用域是 看html的，

变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用

<div class="d1">我真帅</div>
<div class="d2">我真是太帅了</div>

.d1 {
    --bgColor: red;
	background-color: var(--bgColor);  /* 使用变量 */
}
.d2 {
    background-color: var(--bgColor);  /* ×无法使用，没有效果× */
}

将以上变量定义改为

:root {
    --bgColor: red;
}
.d1 {
	background-color: var(--bgColor);  /* 可以使用 */
}
.d2 {
    background-color: var(--bgColor);  /* 可以使用 */
}

二、预处理器less

1、less简述

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

LESS中文网：[http://lesscss.cn/]

需要明白的知识点：

• 变量 variable
• 混合 mixin
• 嵌套
• 循环 loop

注意：

• 浏览器是不识别 less 文件
• less文件需要通过一些工具，重新打包成 css文件

2、less 引入

在普通的html文件，以及微信小程序，都可以这样

步骤：

1、举例 VScode 编辑器

2、安装插件 Easy LESS

3、在VScode编辑那里，加入以下代码

重新打包位 wxss 或 css 文件

"less.compile": {
    "outExt": ".wxss"  
  }

"less.compile": {
    "outExt": ".css"  
}

4、直接使用 less 语法

/* 1 定义less变量 */
@color:yellow;
text {
  /* 2 使用变量 */
  color: @color;
}

2、less 变量

• 变量定义： @变量名= 参数
• 变量使用：@变量名

/* 变量定义 */
@bgColor: aqua;
@border: 1px solid red;

.d1 {
  /* 变量使用 */  
  background-color: @bgColor;
  border: @border;
}

3、less 混合

可以理解为 less中的 方法，函数

• **声明函数 关键字 . **
• 可用于封装样式，用于多个差不多的样式，只是值不同

/* 1 声明函数 关键字 . */
.setColor(@c, @fc) {
  background-color: @c;
  border: 1px solid @c;
  color: @fc;
}

div {
  /* 2 调用函数 */
  .setColor(red, #fff)
}

4、less 嵌套

可以用于像 html 一样的嵌套关系

推荐 嵌套级别不要超过 3级

<div>
  <p>
    <a href="">百度</a>
  </p>
</div>

div {
  border: 1px solid red;
  p {
    a {
      text-decoration: none;
    }
  }
}

& 表示当前选择器的父级

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

>表示子代选择器

#ddiv {
    >.redCls {
		text-decoration: none;
    }
}

5、less 循环 loop

如果有类似的结构，是十分适合循环来写的

.d1 {
  width: 10px;
}
.d2 {
  width: 20px;
}
.d3 {
  width: 30px;
}

less的循环 是函数中的一种，也是递归

// 1. 当 index 的值 大于0 就执行
.loop(@index) when (@index > 0) {
  // 2. 开始递归
  .loop(@index - 1);

  .d@{index} {
    width: @index * 10px;
  }

}

// 3. 调用
.loop(3);