Less预处理——混合方法

Posted 前端杂货铺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Less预处理——混合方法相关的知识，希望对你有一定的参考价值。

系列文章目录

文章目录

一、混合方法

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;

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

css的预处理器less的混合函数的用法

本文只说用法步骤，不说基本概念。

使用步骤

less文件

/* 第一步，在项目的assets文件夹下新建这个css.less文件,
   里面放置我们需要使用的混合less，可以有多个。
   比如这里我们放置两个less混合函数，用谁指定谁即可
*/ 

// 第二步，使用变量指定默认值
.content(@width:480px,@height:360px,@background:#bfa){
    width: @width;
    height: @height;
    background-color: @background;
}

.content2(@width:50px,@height:50px,@background:pink){
    width: @width;
    height: @height;
    background-color: @background;
}

vue文件

<template>
  <div class="box">
    <div class="content"></div>
  </div>
</template>

<script>
export default {
  name: "lessDemo",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// 第三步，引入这个less文件，并准备使用
@import "@/assets/css.less";
.box {
  width: 100%;
  height: 100%;
  .content {
    // 第四步（1）  不传参使用默认less的混合函数
    // .content();

    // 第四步（2）  传参就使用我们传过去的
    // .content(600px,200px,#baf);

    // 第四步（3）  可以根据名字指定使用对应的那个less混合函数
    .content2()
  }
}
</style>
less的混合函数的思想其实就是高内聚、低耦合的思想，只不过是css层面的，把公共的、类似的css提取出来，单独存放。哪里需要就在哪里引入，若使用的地方略有不同，可以通过传参的方式进行改变控制。和html的组件化拆分、js的模块化、函数式编程类似。灵活使用项目的less，可以让项目更容易维护

vue中也有混合mixin，思想也是用来实现代码功能的复用的。后续会再写一篇关于vue混合的使用方法

以上是关于Less预处理——混合方法的主要内容，如果未能解决你的问题，请参考以下文章

less混合

Less基础

Less

LESS 变量作为参数混合

less中的继承与混合

less基础引用