less学习

淡淡的烟草味﹌ 2023-01-17 06:23 114阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70]  
**本文参考less官网快速入门**

#### 0. 背景 ####

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。利用 JavaScript 脚本将 Less 样式转换成 CSS 样式。

#### 1. npm安装 ####

> Less可以通过npm在命令行上使用，可以作为浏览器的脚本文件下载，也可以在各种各样的第三方工具中使用。

npm install -g less

**命令行用法**

> 安装后，可以从命令行调用编译器，如下所示：

lessc styles.less
    
    // 将CSS结果保存到您选择的文件中，请使用：
    lessc styles.less styles.css
    
    // 配合使用 clean-css 插件一起使用
    lessc --clean-css styles.less styles.min.css

#### 2. 变量（Variables） ####

@width: 10px;
    @height: @width + 10px;
    
    .header { 
      width: @width;
      height: @height;
    }

编译后：

.header { 
      width: 10px;
      height: 20px;
    }

#### 3. 混合（Mixins） ####

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.mixin-style { 
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

使用方式：

.class-box-1 { 
    	.mixin-style();
    	height:100px;
    }
    .class-box-2 { 
    	.mixin-style();
    	height:50px;
    }

**带参数混合**

// mixin.less 文件
    .mixins(@h, @w, @color:red) { 
      font-size: 12px;
      height: @h;
      width: @w;
      color: @color;
    }

@import 'mixin';
    
    .header { 
      color: black; .navigation { 
        font-size: 12px;
        .mixins(50px, 100px, deeppink);
      }
      .logo { 
        display: flex;
        .mixins(150px, 100px);
      }
    }

编译后：

.header { 
      color: black;
    }
    .header .navigation { 
      font-size: 12px;
      height: 50px;
      width: 100px;
      color: deeppink;
    }
    .header .logo { 
      display: flex;
      font-size: 12px;
      height: 150px;
      width: 100px;
      color: red;
    }

**指定传参数**

.logo { 
        display: flex;
        .mixins(@h:150px, @w:100px);
      }

**匹配模式**

.logo (L, @l){ 
        display: flex;
        margin-left: @l;
    }
    
    .logo (R, @r){ 
        display: flex;
        margin-left: @r;
    }
    
    // 调用
    .logo(L, 20px);
    .logo(R, 200px);

**@arguments**

.border(@1, @2, @3) { 
    	border:@arguments
    }
    
    .box { 
    	.border(1px, solid, red);
    }

#### 4. 嵌套（Nesting） ####

.header { 
      color: black; .navigation { 
        font-size: 12px;
      }
      .logo { 
        width: 300px;
      }
    }

编译后：

.header { 
      color: black;
    }
    .header .navigation { 
      font-size: 12px;
    }
    .header .logo { 
      width: 300px;
    }

& 表示当前选择器的父级）：

.clearfix { 
      display: block;
      zoom: 1; &:after { 
        content: " ";
        display: block;
        visibility: hidden;
      }
    }

#### 5.运算（Operations） ####

算术运算符 +、-、\*、/ 可以对任何数字、颜色或变量进行运算。计算的结果以最左侧操作数的单位类型为准。

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

#### 6.转义（Escaping）原样输出 ####

> 任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

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

编译为：

@media (min-width: 768px) { 
      .element { 
        font-size: 1.2rem;
      }
    }

注意，从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px);
    .element { 
      @media @min768 { 
        font-size: 1.2rem;
      }
    }

#### 7.函数（Functions） ####

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。  
[函数手册地址][Link 1]  
函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

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

#### 8.命名空间和访问符（对象.方法 的形式访问） ####

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 \#bundle 之下，为了以后方便重用或分发：

#bundle() { 
      .button { 
        display: block;
        border: 1px solid black;
        background-color: grey; &:hover { 
          background-color: white;
        }
      }
      .tab {  ... }
      .citation {  ... }
    }
    
    // 现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做： #header a { 
      color: orange;
      #bundle.button();  // 还可以书写为 #bundle > .button 形式
    }

#### 9.映射（Maps） ####

#colors() { 
      primary: blue;
      secondary: green;
    }
    
    .button { 
      color: #colors[primary];
      border: 1px solid #colors[secondary];
    }

编译后：

.button { 
      color: blue;
      border: 1px solid green;
    }

#### 10.导入（Importing） ####

@import "library"; // library.less
    @import "typo.css";

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYzOTA5NQ_size_16_color_FFFFFF_t_70]: /images/20221021/9d8b7fb0336d4391bc082070d49b19a9.png
[Link 1]: https://less.bootcss.com/functions/