Less预处理——变量和嵌套

野性酷女 2023-09-27 11:46 69阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *   *  一、Less 变量
     *   *  1、选择器变量
         *  2、属性变量
         *  3、url 变量
         *  4、声明变量
         *  5、变量运算
         *  6、变量的作用域
         *  7、用变量去定义变量
     *  二、Less 嵌套
     *   *  1、& 的使用
         *  2、媒体查询
         *  3、小技巧：添加私有样式

--------------------

### 一、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%;
    }

![在这里插入图片描述][c98ff16a8c7e4e009c2f700393bab66e.png]

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

![在这里插入图片描述][d37463f1877e44c99a2f5a96f69ecd71.png]

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

![在这里插入图片描述][b446ba79c8b54a738058aa9bc525bd89.png]

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

![在这里插入图片描述][a241f1a613e9433b9763a6b19eaeac54.png]

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

![在这里插入图片描述][f3081857c87344f89de316f70210e97f.png]

#### 7、用变量去定义变量 ####

index.less 文件

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

index.css 文件

*  自动转义后的 css 文件

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

![在这里插入图片描述][cad2cac8631c460884b865c85b88b900.png]

### 二、Less 嵌套 ###

#### 1、& 的使用 ####

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

index.html 文件

*  多层级的嵌套

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

![在这里插入图片描述][45910647506b468e9a431d5d1f2dff9d.png]

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

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

[c98ff16a8c7e4e009c2f700393bab66e.png]: https://img-blog.csdnimg.cn/c98ff16a8c7e4e009c2f700393bab66e.png
[d37463f1877e44c99a2f5a96f69ecd71.png]: https://img-blog.csdnimg.cn/d37463f1877e44c99a2f5a96f69ecd71.png
[b446ba79c8b54a738058aa9bc525bd89.png]: https://img-blog.csdnimg.cn/b446ba79c8b54a738058aa9bc525bd89.png
[a241f1a613e9433b9763a6b19eaeac54.png]: https://img-blog.csdnimg.cn/a241f1a613e9433b9763a6b19eaeac54.png
[f3081857c87344f89de316f70210e97f.png]: https://img-blog.csdnimg.cn/f3081857c87344f89de316f70210e97f.png
[cad2cac8631c460884b865c85b88b900.png]: https://img-blog.csdnimg.cn/cad2cac8631c460884b865c85b88b900.png
[45910647506b468e9a431d5d1f2dff9d.png]: https://img-blog.csdnimg.cn/45910647506b468e9a431d5d1f2dff9d.png