Less预处理——变量和嵌套

系列文章目录

---

---

一、Less 变量

1、选择器变量

让选择器变成动态的

index.html 文件

• id 和 class 选择器

  <div id="wrap">
      Hello Less!
  </div>
  <div class="wrap">
      Hello World!
  </div>
1
2
3
4
5
6

index.less 文件

• 第一种是 确定了 选择器的类型（id 选择器）
• 第二种是 不确定 选择器的类型（id/class 选择器）

// 选择器变量
@mySelector: #wrap;
@wrap: wrap;

@{mySelector} {
    color: #ccc;
    width: 50%;
}

.@{wrap} {
    color: skyblue;
    width: 50%;
}

#@{wrap} {
    color: aqua;
    width: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.css 文件

• 自动转义后的 css 文件

#wrap {
  color: #ccc;
  width: 50%;
}
.wrap {
  color: skyblue;
  width: 50%;
}
#wrap {
  color: aqua;
  width: 50%;
}
1
2
3
4
5
6
7
8
9
10
11
12

2、属性变量

减少代码书写量

index.html 文件

备注：这是一个公共的HTML结构，以下测试均使用该结构。

  <div id="wrap">
      Hello Less!
  </div>
1
2
3

index.less 文件

• 属性变量，设置属性

// 选择器变量
@mySelector: #wrap;
@wrap: wrap;

// 属性变量
@borderStyle: border-style;
@solid: solid;

@{mySelector} {
    @{borderStyle}: @solid;
}
1
2
3
4
5
6
7
8
9
10
11

index.css 文件

• 自动转义后的 css 文件

#wrap {
  border-style: solid;
}
1
2
3

3、url 变量

项目结构改变时，修改其变量就可以

index.less 文件

@images: "../../img";

body {
    background: url("@{images}/xxx.png");
}
1
2
3
4
5

index.css 文件

• 自动转义后的 css 文件

body {
  background: url("../../img/xxx.png");
}
1
2
3

4、声明变量

结构：@name: {属性: 值}

使用：@name()

示例：超出的内容，使用 ... 表示

index.less 文件

@Rules: {
       width: 60px;
       height: 30px;
       border: 1px solid #ccc;
       /*第一步： 溢出隐藏 */
       overflow: hidden;
       /* 第二步：让文本不会换行， 在同一行继续 */
       white-space: nowrap;
       /* 第三步：用省略号来代表未显示完的文本 */
       text-overflow: ellipsis;
}
#wrap {
    @Rules();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

index.css 文件

• 自动转义后的 css 文件

#wrap {
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  /*第一步： 溢出隐藏 */
  overflow: hidden;
  /* 第二步：让文本不会换行， 在同一行继续 */
  white-space: nowrap;
  /* 第三步：用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
}
1
2
3
4
5
6
7
8
9
10
11

5、变量运算

• 加减法时，以第一个数据的单位为基准
• 乘除法时，注意单位一定要统一
• 注意添加空格

index.less 文件

@width: 300px;
@color: #ccc;
#wrap {
    width: @width - 20;
    height: @width - 20 * 2;
    margin: (@width - 200) * 2;
    color: @color*1;
    background-color: @color + #111;
}
1
2
3
4
5
6
7
8
9

index.css 文件

• 自动转义后的 css 文件

#wrap {
  width: 280px;
  height: 260px;
  margin: 200px;
  color: #cccccc;
  background-color: #dddddd;
}
1
2
3
4
5
6
7

6、变量的作用域

就近原则

index.less 文件

@var:@a;
@a:100%;
#wrap {
    width: @var;
    @a:9%;
    border: 1px solid #ccc;
}
1
2
3
4
5
6
7

index.css 文件

• 自动转义后的 css 文件

#wrap {
  width: 9%;
  border: 1px solid #ccc;
}
1
2
3
4

7、用变量去定义变量

index.less 文件

@fond:@var;
@var:'fond';
#wrap::after {
    content: @var;
}
1
2
3
4
5

index.css 文件

• 自动转义后的 css 文件

#wrap::after {
  content: 'fond';
}
1
2
3

二、Less 嵌套

1、& 的使用

&：代表的上一层选择器的名字

index.html 文件

• 多层级的嵌套

<div class="center">
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
1
2
3
4
5
6
7

index.less 文件

• &：代表的上一层选择器的名字
• 可写可不写

.center {
    width: 100px;
    height: 100px;
    background: red;
    & #list {
        width: 50px;
        height: 50px;
        background: skyblue;
        li {
            width: 20px;
            height: 20px;
            background: #ccc; 
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

index.css 文件

• 自动转义后的 css 文件

.center {
  width: 100px;
  height: 100px;
  background: red;
}
.center #list {
  width: 50px;
  height: 50px;
  background: skyblue;
}
.center #list li {
  width: 20px;
  height: 20px;
  background: #ccc;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、媒体查询

index.less 文件

#main {
    @media screen {
        @media (max-width: 768px) {
            width: 100px;
        }
    }
    @media tv {
        width: 2000px;
    }
}
1
2
3
4
5
6
7
8
9
10

index.css 文件

• 自动转义后的 css 文件

@media screen and (max-width: 768px) {
  #main {
    width: 100px;
  }
}
@media tv {
  #main {
    width: 2000px;
  }
}
1
2
3
4
5
6
7
8
9
10

3、小技巧：添加私有样式

示例：实现样式从隐藏到显示的切换

index.less 文件

#main {
    &.show {
        display: block;
    }
}

.show {
    display: none;
}
1
2
3
4
5
6
7
8
9

index.css 文件

• 自动转义后的 css 文件

#main.show {
  display: block;
}
.show {
  display: none;
}
1
2
3
4
5
6

index.html 文件

• 获取 main 节点，实现样式从隐藏到显示

const main = document.getElementById('main')
main.classList.add("show")
1
2

这里是 前端杂货铺，期待您的 三连 + 关注