Less预处理——变量和嵌套

系列文章目录

文章目录

一、Less 变量

1、选择器变量

让选择器变成动态的

index.html 文件

• id 和 class 选择器

<div id="wrap">
      Hello Less!</div><div class="wrap">
      Hello World!</div>

index.less 文件

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

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

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

#@{wrap}{color: aqua;width:50%;}

index.css 文件

• 自动转义后的 css 文件

#wrap {color: #ccc;width:50%;}.wrap {color: skyblue;width:50%;}
#wrap {color: aqua;width:50%;}

2、属性变量

减少代码书写量

index.html 文件

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

<div id="wrap">
      Hello Less!</div>

index.less 文件

• 属性变量，设置属性

// 选择器变量
@mySelector: #wrap;
@wrap: wrap;// 属性变量
@borderStyle: border-style;
@solid: solid;

@{mySelector}{
    @{borderStyle}: @solid;}

index.css 文件

• 自动转义后的 css 文件

#wrap {
  border-style: solid;}

3、url 变量

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

index.less 文件

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

body {background:url("@{images}/xxx.png");}

index.css 文件

• 自动转义后的 css 文件

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

4、声明变量

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

使用：@name()

**示例：超出的内容，使用

...

表示**

index.less 文件

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

index.css 文件

• 自动转义后的 css 文件

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

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;}

index.css 文件

• 自动转义后的 css 文件

#wrap {width: 280px;height: 260px;margin: 200px;color: #cccccc;
  background-color: #dddddd;}

6、变量的作用域

就近原则

index.less 文件

@var:@a;
@a:100%;
#wrap {width: @var;
    @a:9%;border: 1px solid #ccc;}

index.css 文件

• 自动转义后的 css 文件

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

7、用变量去定义变量

index.less 文件

@fond:@var;
@var:'fond';
#wrap::after {content: @var;}

index.css 文件

• 自动转义后的 css 文件

#wrap::after {content:'fond';}

二、Less 嵌套

1、& 的使用

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

index.html 文件

• 多层级的嵌套

<div class="center"><ul id="list"><li></li><li></li><li></li></ul></div>

index.less 文件

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

.center {width: 100px;height: 100px;background: red;& #list {width: 50px;height: 50px;background: skyblue;
        li {width: 20px;height: 20px;background: #ccc;}}}

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;}

2、媒体查询

index.less 文件

#main {
    @media screen {
        @media(max-width: 768px){width: 100px;}}
    @media tv {width: 2000px;}}

index.css 文件

• 自动转义后的 css 文件

@media screen and(max-width: 768px){
  #main {width: 100px;}}
@media tv {
  #main {width: 2000px;}}

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

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

index.less 文件

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

index.css 文件

• 自动转义后的 css 文件

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

index.html 文件

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

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

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