代码探险家

这个屌丝很懒，什么也没留下！

热门标签

less中混合和嵌套详解_less混合函数

作者：代码探险家 | 2024-08-21 15:43:01

踩

less混合函数

1.4 less可以直接继承在其他选择器中的样式

1.混合(Mixin)

1.1 Mixin的定义

Mixin在less官网中的定义为:混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

但我感觉这个说法有点难理解,我们可以简单的理解就是函数,可以封装CSS代码,在别的选择器中调用,提高代码的重用性和可维护性.

Mixins 有点像函数,在定义后,可以通过名称调用.(也支持动态传参)

混合可以将一个定义好的class A 轻松的引入到另一个class B 中,从而简单实现class B继承class A 中的所有属性,我们还可以带参数地调用,就像使用函数一样

先看一个简单的示例:


.color {
    background-color:#58a;
    color:18px;
}

应用这个类(class)


.box {
    width:100px;
    height:50px;
    .color();
}
.wrap {
    width:100px;
    height:50px;
    border:1px solid red;
    .color();
}

通过这种方式就可以将color这个类应用到.box和.wrap中了..

接下来我们来详细的看一下Mixins的定义与调用等的具体方法.

1.2 Mixin的定义

混合有两种定义方式,一种是参数的定义,另一种是有参数的定义.

无参数的定义

.混合名() {

封装的css代码

}

有参数的定义

.混合名(@参数1:参数的默认值,@参数2:参数的默认值......) {

封装的css代码

}

1.3 调用混合

语法

选择器{

混合名(@参数)

}


// 使用混入
@baseColor: #369;
.box p {
  .error(@baseColor, 30px)
}

调用示例

值得注意的是在没有参数的情况下,不加括号也可以调用.


.size {
    width: 100px;
    height: 100px;
    border:1px solid green;
}
#box{
    .size(); //加括号调用
    background-color: #58a;
}
.wrap {
    .size; //没有参数的情况下不加括号也可以
    background-color: skyblue;
}

如果Mixin需要动态参数,则必须加括号传参:


.init(@width,@height,@color) {
    width:@width;
    height: @height;
    color:@color;
}
@width:200px;
@height:200px;
@color:red;
.box1{
    .init(@width, @height, @color);
    background-color: skyblue;
}
.wrap {
    .init(300px,100px,red);
    border:1px solid blue;
}

结果如下:

1.4 less可以直接继承在其他选择器中的样式


.box {
    width:100px;
    height:100px;
    color:white;
}
.wrap {
    .box; //.wrap会直接继承.box中已写的样式
    backgorund-color:blue;
}

Mixin中除了写样式选择器,还可以写变量


//Mixin里除了可以写样式,选择器, 还可以写变量
.mixin() {
  @width:  100%;
  @height: 200px;
}
.box1 {
  .mixin();
  width:  @width;
  height: @height;
  border:1px solid red;
}

Mixin除了返回变量,还可以返回Mixin.


// Mixins 里除了返回变量,还可以返回Mixins
#box(@color){
    .wrap(){
        width:500px;
        height:100px;
        background:@color;
    }
}
.box1{
    #box(red);  // 执行第一个Mixin是为了能够使用里面的Mixin
    .wrap();   // 第二个执行Mixin里面的Mixin
}

3.5 可以在Mixin中使用选择器


.hover(@color){
    &:hover{
        background:@color;
    }
}
.wrap{
    width: 100px;
    height: 100px;
    background: red;
    &:hover > span{  //注意在此处的&与冒号之间不能有空格,等价         于.wrap:hover >span
        background:skyblue;
    }
    // .hover(skyblue)    //如果只是当前元素添加hover效果,而不是给当前元素的子元素或兄弟元素添加,那么&可省略
    
}

单独为box元素添加hover样式


.hover(@color){
    &:hover{
        background:@color;
    }
}
.box1{
    width: 200px;
    height: 200px;
    margin-top:20px;
    background: skyblue;
    &:hover{
        background:red;
    }
    // .hover(red);   //上下两种弄方式等效
}

1.5 Mixin的默认值与不定参

默认值:

mixin中可以使用默认值,如果在没有传入参数的时候,则会使用默认值.

如果不设置默认值,MIxin的值在没有参数的情况下就会报错,且传参时实参的个数必须与设置的默认值的个数相等.


.size(@width : 100px, @height : 100px , @color : pink){
    width: @width;
    height: @height;
    background-color: @color;
}
.box1 {
    .size(50px,50px,#58a);   //使用自己所传入的参数
    border:3px solid pink;
}
.wrap {
    .size;   //使用已经设置的默认参数
    color:#fff;
}

不定参

...就是@reset剩余参数,会将剩余的所有参数都加到@arguments中


// ... 就是@reset 剩余参数, 会将剩余的所有参数都加到@arguments里 
.boxShadow(...){
    box-shadow: @arguments;
}
.box1{
.boxShadow(1px,4px,30px,red);
}
// @arguments是处理第一个实参外的所有实参的集合
.boxShadow(@width,...){
    box-shadow: @arguments;
}
.wrap{
.boxShadow( 50px,1px,4px,30px,red);
}

编译成css之后的结果:


.box1 {
  box-shadow: 1px 4px 30px red;
}
.wrap {
  box-shadow: 50px 1px 4px 30px red;
}

1.6 Mixin的判断条件

Less没有if / else 但是less具有一个when，and，not与“，”语法。

1. when 表示在使用Mixin的时候必须满足 when后面的条件


#box(@width, @height, @color) when (@width > 100px){
    width: @width;
    height: @height;
    background-color: @color;
}
.box{
    #box(101px,50px,pink)
}

2. 如果有两个必须同时满足的条件,使用 and


// 这里必须满足传递的宽度和颜色必须同时同满足条件才能执行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){
    width: @width;
    height: @height;
    background-color: @color;
}
.box{
    #box(100px,50px,skyblue)
}

3. 如果需要排除某个条件才能使用Mixin,使用not


// 这里排除颜色为pink ,除了pink颜色值都可以运行Mixin
#box(@width, @height, @color) when  not (@color = pink){
    width: @width;
    height: @height;
    background-color: @color;
}
.box{
    #box(100px,50px,skyblue)
}

4. 如果需要多个条件只要满足一个就执行Mixin,使用逗号,


// 虽然不满足宽度大于等于100px,但是满足为了颜色是skyblue 所以Mixin会执行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){
    width: @width;
    height: @height;
    background-color: @color;
}
.box{
    #box(50px,50px,skyblue)
}

1.7 模式匹配

根据条件进行样式显示,类似JS中的switch,有些情况下,我们想根据传入的参数来改变混合的默认呈现.

比如:

相当于定义一个相同的混合名称,根据传入其他混合名称的不同,执行不同混合分,但是有一个公共的分支,任何一个分支都会调用

@_ 表示匹配所有,通常用于定义公共部分

语法:

模式匹配的定义

公共部分

.fun (@_, @color){

// 任何分支都会执行的公共部分

}

.fun( s1,@color){

// s1 分支独有代码

}

模式匹配的使用

h1{

.fun(s2, @color)

}


// 三角形公用代码
.sjx(@_, @color, @size) {
    width: 0;
    left: 0;
    display: block;
    border: @size solid transparent;
  }
  
  // 左三角形
  .sjx(l, @color, @size) {
    border-left-color: @color;
  }
  
  // 右三角形
  .sjx(r, @color, @size) {
    border-right-color: @color;
  }
  
  // 上三角形
  .sjx(t, @color, @size) {
    border-top-color: @color;
  }
  
  // 下三角形
  .sjx(b, @color, @size) {
    border-bottom-color: @color;
  }
  
   .trangle1 {
    .sjx(t,#00a8ff, 20px)  //通过传入不同的参数来产生不同方向的三角形
  }
  .trangle2 {
    .sjx(b, pink, 20px)
  }
  .trangle3 {
    .sjx(r, purple, 20px)
  }
  .trangle4 {
    .sjx(l,#4cd137, 20px)
  }

2.嵌套(重要)

2.1 嵌套的定义

具有层级关系的CSS样式,CSS的层级是有HTML的结构决定的.

2.2 使用嵌套的优势

用在具有后代关系和父子关系的选择器中
减少代码量,
代码结构更加清晰

2.3 使用示例


.border {
    border:1px solid #58a;
}
.container {
    width: 200px;
    height: 300px;
    .border();
    ul {
        list-style: none;
        padding:0;
        margin:0;
        .border();
        li {
            width: 100px;
            height: 80px;
            background-color: khaki;
            margin-top:20px;
            span {
                font-size: 20px;
                color:green;
            }
        }
    }
    .box {
        width: 200px;
        height: 50px;
        .border();
        margin-top:30px;
        background-color: lightcoral;
    }
}

编译之后的css代码:


.border {
  border: 1px solid #58a;
}
.container {
  width: 200px;
  height: 300px;
  border: 1px solid #58a;
}
.container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #58a;
}
.container ul li {
  width: 100px;
  height: 80px;
  background-color: khaki;
  margin-top: 20px;
}
.container ul li span {
  font-size: 20px;
  color: green;
}
.container .box {
  width: 200px;
  height: 50px;
  border: 1px solid #58a;
  margin-top: 30px;
  background-color: lightcoral;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/1012416