Less预处理——变量和嵌套

系列文章目录

一、less 变量

1、选择器变量

让选择器变成动态的

index.html 文件

• id 和 class 选择器

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

index.less 文件

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

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

@{mySelector} {
    color: #***c;
    width: 50%;
}

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

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

index.css 文件

• 自动转义后的 css 文件

#wrap {
  color: #***c;
  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 #***c;
       /*第一步： 溢出隐藏 */
       overflow: hidden;
       /* 第二步：让文本不会换行， 在同一行继续 */
       white-space: nowrap;
       /* 第三步：用省略号来代表未显示完的文本 */
       text-overflow: ellipsis;
}
#wrap {
    @Rules();
}

index.css 文件

• 自动转义后的 css 文件

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

5、变量运算

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

index.less 文件

@width: 300px;
@color: #***c;
#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: #*********;
  background-color: #dddddd;
}

6、变量的作用域

就近原则

index.less 文件

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

index.css 文件

• 自动转义后的 css 文件

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

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: #***c; 
        }
    }
}

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: #***c;
}

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")

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