less预处理的概念与使用

矫情吗；* 2023-02-21 12:52 9阅读 0赞

## 概念 ##

1.  less [官网][Link 1]  
    Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，**增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展**。Less 可以运行在 Node 或浏览器端。

基本的使用

嵌套写法
    #header { 
      color: black;
      .navigation { 
        font-size: 12px;
      }
      .logo { 
        width: 300px;
      }
    }

## 总览 ##

**1. 变量** @

> 变量是延迟加载的，不必在使用前声明。所以可以先使用，后定义。因此会出现后面定义的变量覆盖前面的变量

// Variables
    @link-color:        #428bca; // sea blue
    @link-color-hover:  darken(@link-color, 10%);
    
    // Usage
    a,
    .link { 
      color: @link-color;
    }
    a:hover { 
      color: @link-color-hover;
    }
    .widget { 
      color: #fff;
      background: @link-color;
    }

**2. 可变插值**

// Variables
    @my-selector: banner;
    
    // Usage
    .@{ my-selector} { 
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }
    
    //编译后
    .banner { 
      font-weight: bold;
      line-height: 40px;
      margin: 0 auto;
    }

**3.混合（类似函数的使用）**

.b-coloe { 
        border: 4px solid red;
    }
    .box { 
        .b-coloe();
        width: 100px;
        height: 200px;
        background-color: blue;
    }
    //编译后
    .b-coloe { 
      border: 4px solid red;
    }
    .box { 
      border: 4px solid red;
      width: 100px;
      height: 200px;
      background-color: blue;
    }

**4.父选择器&**

经典的清除浮动案例
    .clearfix { 
      display: block;
      zoom: 1;
    
      &:after { 
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }
    //编译后
    .clearfix { 
      display: block;
      zoom: 1;
    }
    .clearfix:after { 
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }

**5.嵌套的冒泡**

> 思路：就近原则

.component { 
        width: 300px;
        @media (min-width: 768px) { 
          width: 600px;
          @media  (min-resolution: 192dpi) { 
            background-image: url(/img/retina2x.png);
          }
        }
       .box { 
        @media (min-width: 1280px) { 
            width: 800px;
          }
       }
      }
    //编译后
    .component { 
      width: 300px;
    }
    @media (min-width: 768px) { 
      .component { 
        width: 600px;
      }
    }
    @media (min-width: 768px) and (min-resolution: 192dpi) { 
      .component { 
        background-image: url(/img/retina2x.png);
      }
    }
    @media (min-width: 1280px) { 
      .component .box { 
        width: 800px;
      }
    }

**6.运算（符合数学运算）**

// 所有操作数被转换成相同的单位
    @conversion-1: 5cm + 10mm; // 结果是 6cm
    @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
    
    // conversion is impossible
    @incompatible-units: 2 + 5px - 3cm; // 结果是 4px
    
    // example with variables
    @base: 5%;
    @filler: @base * 2; // 结果是 10%
    @other: @base + @filler; // 结果是 15%

> calc() 特例  
> 为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。**符号必须有空格**

@var: 50vh/2;
    width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

> 转义符，原样输出  
> ~“anything” 或 ~‘anything’，可省略 ~

@min768: ~"(min-width: 768px)";
    .element { 
      @media @min768 { 
        font-size: 1.2rem;
      }
    }
    编译为：
    
    @media (min-width: 768px) { 
      .element { 
        font-size: 1.2rem;
      }
    }

**7.[函数][Link 2]**

简单使用
    @base: #f04615;
    @width: 0.5;
    
    .class { 
      width: percentage(@width); // returns `50%`
      color: saturate(@base, 5%);
      background-color: spin(lighten(@base, 25%), 8);
    }

[Link 1]: http://lesscss.cn/
[Link 2]: https://less.bootcss.com/functions/