Less学习笔记(二)

爱打代码的臭弟弟

已于 2022-10-25 15:59:06 修改

阅读量799

点赞数

分类专栏：前端文章标签： 1024程序员节

于 2022-10-24 16:12:09 首次发布

本文链接：https://blog.csdn.net/a1999tyj/article/details/127494493

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Less学习笔记(二)

1.less中的变量

1.1 less中的变量基本和js中的变量一样
1.2 less中变量定义的格式
- less中定义变量的格式
  - @变量名称:值例如：@width、@height
  - less中变量的赋值,和js一样可以将一个变量的值赋值给另一个变量
  - 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>

@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; // 报错
}