Less学习笔记(二)

爱打代码的臭弟弟

2022-10-22 86 阅读1分钟

1.less中的变量

1.1 less中的变量基本和js中的变量一样
1.2 less中变量定义的格式
- less中定义变量的格式
  1. @变量名称:值例如：@width、@height
  2. less中变量的赋值,和js一样可以将一个变量的值赋值给另一个变量
  3. less中变量的赋值：
```
 @变量名称:@变量名称;  
 @w: 400px;  
 @h: @w; // 变量赋值  
 @backgroundColor: blue;  
```

2.less中的全局变量

2.1定义在{}的是局部变量，定义在{}是全局变量
2.2注意点:less中的变量是延迟加载,所以定义在后面的变量也可以在前面使用
2.3less中的变量和js中的变量一样,不同作用域的变量的是相互不影响的,只有相同作用域的变量名才会有影响，在同一作用域定义的变量名，后定义的变量会覆盖先定义的变量

例 HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>03、less中的变量</title>
   <link rel="stylesheet" href="./css/03.less中的变量.css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>

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

例:预处理后的css代码

@w: 400px;
@h: @w; // 变量赋值

.box1 {
  @c: blue;  // 局部变量
  width: @w;
  height: @h;
  background-color: @c;
  margin-bottom: 20px;
}

.box2 {
  width: @w;
  height: @h;
  background-color: @c; // 报错
}