Less预处理——混合方法

缺乏、安全感 2023-09-26 09:10 58阅读 0赞

## 系列文章目录 ##

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

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

*  系列文章目录
 *   *  一、混合方法
     *   *  1、无参数方法
         *  2、默认参数方法
         *  3、方法的匹配模式
         *  4、方法的命名空间
         *  5、方法的条件筛选
         *  6、数量不定的参数
         *  7、使用 !important
         *  8、循环方法
         *  9、属性拼接方法
         *  10、实战小技巧

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

### 一、混合方法 ###

#### 1、无参数方法 ####

方法即为声明的集合，使用时直接键入名称

备注：`.card` 与 `.card()` 是等价的。为了避免代码混淆，建议写成如下形式

index.less 文件

.card() {
        
        background: yellow;
        box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25);
    }
    #wrap {
        
        .card();
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#wrap {
        
      background: yellow;
      box-shadow: 0 1px 2px rgba(100, 110, 125, 0.25);
    }

#### 2、默认参数方法 ####

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数

@arguments 类似于 JS 中的 arguments 指代的是 **全部参数**

传的参数中 **必须带着单位**

index.less 文件

.border(@a:10px; @b:20px; @c:30px; @color: skyblue) {
        
        border: solid 1px @color;
        // @arguments 指代传进来的全部参数
        box-shadow: @arguments;
    }
    #wrap {
        
        .border();
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#wrap {
        
      border: solid 1px skyblue;
      box-shadow: 10px 20px 30px skyblue;
    }

#### 3、方法的匹配模式 ####

与面向对象中的多态类似

示例：

*  第一个参数 left 要会找到方法中 **匹配程度最高的**，如果匹配程度相同，将全部选择，并存在样式覆盖替换
 *  如果匹配的参数是变量，则将会匹配，如 @\_

index.less 文件

.triangle(right, @width: 20px, @color: #ccc) {
        
        border-color: transparent @color transparent transparent;
    }
    .triangle(left, @width: 20px, @color: #ccc) {
        
        border-color: transparent transparent transparent @color;
    }
    
    .triangle(@_, @width: 20px, @color: #ccc) {
        
        border-style: solid;
        border: @width;
    }
    
    // 进行匹配，命中第二个，然后更新一些样式
    #main {
        
        .triangle(left, 50px, #666)
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#main {
        
      border-color: transparent transparent transparent #666;
      border-style: solid;
      border: 50px;
    }

#### 4、方法的命名空间 ####

让方法更加规范

说明：

*  在 CSS 中 > 选择器，选择的是儿子元素，就是必须与父元素有直接血缘的元素
 *  在引入命名空间时，如使用 > 选择器，父元素不能加括号
 *  不得单独使用命名空间的方法，必须先引入命名空间，才能使用其中方法
 *  子方法，可以使用上一层传进来的方法

index.less 文件

// 方法的命名空间
    #card() {
        
        background: pink;
        .d(@w:300px) {
        
            width: @w;
            #a(@h: 300px) {
        
                height: @h;
            }
        }
    }
    
    // 父级方法 使用了 >， 不需要括号
    #wrap {
        
        #card > .d > #a(100px);
    }
    #main {
        
        #card .d();
    }
    #top {
        
        #card;
        .d(100px;);
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#wrap {
        
      height: 100px;
    }
    #main {
        
      width: 300px;
    }
    #top {
        
      background: pink;
      width: 100px;
    }

#### 5、方法的条件筛选 ####

在 Less 中没有 if else，但它有 when

看看是否符合限制的条件

index.less 文件

#card {
        
        // when &&
        .border(@width, @color, @style) when (@width > 100px) and (@color=#ccc) {
        
            border: @style @color @width;
        }
        // when not
        .background(@color) when not (@color >= #111) {
        
            background: @color;
        }
        // , 逗号分隔符方法 ||
        .font(@size: 20px) when (@size > 100px), (@size < 50px) {
        
            font-size: @size;
        }
    }
    
    #main {
        
        #card > .border(500px, #ccc, solid);
        #card > .background(#222);
        #card > .font(10px);
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#main {
        
      border: solid #ccc 500px;
      background: #222;
      font-size: 10px;
    }

#### 6、数量不定的参数 ####

方法接受数量不定的参数，可以使用 `...`

index.less 文件

.boxShadow(...) {
        
        box-shadow: @arguments;
    }
    .textShadow(@a, ...) {
        
        text-shadow: @arguments;
    }
    #main {
        
        .boxShadow(1px, 2px, 5px, #520);
        .textShadow(1px, 2px, 5px, #1314);
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#main {
        
      box-shadow: 1px 2px 5px #520;
      text-shadow: 1px 2px 5px #1314;
    }

#### 7、使用 !important ####

index.less 文件

.border() {
        
        border: 1px solid #520;
        margin: 20px;
    }
    #main {
        
        .border() !important;
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#main {
        
      border: 1px solid #520 !important;
      margin: 20px !important;
    }

#### 8、循环方法 ####

Less 没有提供 for 循环，但可以通过递归去实现

index.less 文件

.generate-columns(4);
    .generate-columns(@n, @i:1) when (@i <= @n) {
        
        .columns-@{
        i} {
        
            width: (@i*100%/@n);
        }
        .generate-columns(@n, (@i+1));
    }

index.css 文件

*  自动转义后的 css 文件内容如下

.columns-1 {
        
      width: 25%;
    }
    .columns-2 {
        
      width: 50%;
    }
    .columns-3 {
        
      width: 75%;
    }
    .columns-4 {
        
      width: 100%;
    }

#### 9、属性拼接方法 ####

`+_` 代表的是空格  
`+` 代表的是逗号

index.less 文件

// + 表示 ,
    .boxShadow() {
        
        box-shadow+: inset 0 0 10px #ccc;
    }
    #main {
        
        .boxShadow();
        box-shadow+: 0 0 20px #666;
    }
    
    // +_ 表示 空格
    .Animation() {
        
        transform+_: scale(2);
    }
    .main {
        
        .Animation();
        transform+_: rotate(15deg);
    }

index.css 文件

*  自动转义后的 css 文件内容如下

#main {
        
      box-shadow: inset 0 0 10px #ccc, 0 0 20px #666;
    }
    .main {
        
      transform: scale(2) rotate(15deg);
    }

#### 10、实战小技巧 ####

计算平均值

index.less 文件

.average(@x, @y) {
        
        @average: ((@x + @y) / 2)
    }
    div {
        
        .average(16px, 50px);
        padding: @average;
    }

index.css 文件

*  自动转义后的 css 文件内容如下

div {
        
      padding: 33px;
    }

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