less语法之--混合

我擦,好安静,公司现在只剩下我一个人了,哈哈,可以尽情的敲击键盘了。

下面是关于less语法之混合,文章中有的变量名在本篇中找不到,是因为我定义在上一篇文章中,写的太长了,索性就将文章一块一块的写,这样标题看着比较清晰,如果看不太明白的话,可以按照顺序来看一看,上下联系一下就可以了。

关于less语法,我都写在同一个文集中,可以看看《less语法》文集;


三. 混合

关于混合,分一下三种情况:

  • 不带参数;
  • 带参数,无默认值;
  • 带参数,同时设置默认值;

调用的时候存在的区别:

  • 不带参数的,不加括号,直接使用;
  • 带参数,无默认值的;调用的时候加括号,括号里必须传值,不然会报错;
  • 带参数,有默认值的,调用的时候加括号,可传也可不传参数,不传参默认使用默认值,不会报错;
项目 不带参数 带参数,无默认值 带参数,有默认值
调用 .border; .border_test1(1px); .border_test2(1px);
调用时特殊情况 .border_test1();//报错 .border_test2();//使用默认值,不报错
--- --- 具体使用代码看下文 ---

3.1 less混合--不带参数

设置一个.box的 样式1:

    .box {
        width: @demo_width;
        height: @demo_height;
        background-color: @color_style;
        font-size: 16px;
        margin: 0 auto;
    }

设置一个.border的 样式2:

    .border {
        border:2px solid red;
    }

怎么使用混合使样式1也具有样式2的样式?

  • 之前的做法肯定是找到class='box'的元素,然后给追加一个border的类名,即class='box border'
  • 使用less的话,可以直接将这个类名添加到要被追加元素的样式里面即可
  .box {
        width: @demo_width;
        height: @demo_height;
        background-color: @color_style;
        font-size: 16px;
        margin: 0 auto;
        // 混合写法(该注释不被保留)
        /*混合写法(该注释被保留)*/
        .border;
    }

编译结果:

      .box {
        width: 300px;
        height: 500px;
        background-color: #E0EAFA;
        font-size: 16px;
        margin: 0 auto;
         /*混合写法(该注释被保留)*/
        border: 2px solid red;
    }

同理,如果定义一个.box2的样式是在.box的基础上追加新样式,混合写法如下:

    .box2 {
        .box;
        /*追加的样式*/
        padding: 20px;
        color: #393939;
    }

3.2 less混合--带参数(不设置默认值)

可以传参数,参数可以写成一个变量,这样根据你的需要引用同一个类的样式,但传递参数不同,样式不同

注意: 如果不设置默认值的话,必须给它传参,不然是会报错的!!!

我们可以给它传递一个变量做参数,这样我们可以动态的变化这个值,如下:

    .border_test1(@border_width) {
        border: @border_width solid green;
    }

举个栗子吧:

.box_test1 {
        .border_test1(1px);
        width: 100px;
        height: 200px;
        background-color: red;
    }
 .box_test2 {
        .border_test1(2px);
        width: 300px;
        height: 200px;
        background-color: yellow;
    }

编译结果:

.box_test1 {
        border: 1px solid green;
        width: 100px;
        height: 200px;
        background-color: red;
    }
 .box_test2 {
        border: 2px solid green;
        width: 300px;
        height: 200px;
        background-color: yellow;
    }

3.3 less混合--带参数(设置默认值)

相当于ES6语法中的设置变量,带参数默认值,如果有参数就使用参数,如果没有参数或者参数为undefined就使用默认值

这里我们给它传递变量做参数的同时设置默认值,如果有参使用参数,无参使用默认值代替,如下:

    .border_test2(@border_width: 10px) {
        border: @boeder_width solid pink;
    }

举个栗子吧:

 .box_text3 {
        .border_test2(5px);
        width: 200px;
        height: 100px;
    }
    
   
 .box_test4 {
     // 不传参使用默认值,有默认值的时候,不传参也不会报错
        .border_test();
        width: 150px;
        height: 100px;
    }

编译结果:

    .box_text3 {
       border: 5px solid pink;
        width: 200px;
        height: 100px;
    }
    
   
    .box_test4 {
        border: 10px solid pink;
        width: 150px;
        height: 100px;
    }

提示:

  • 变量命名不冲突;

  • 定义在border_test1中的@border_width变量与定义在border_test2中的@border_width变量不会互相冲突的;

  • 定义在border_test1中的@border_width变量只在border_test1中起作用;

  • 同样,定义在border_test2中的@border_width变量只在border_test2中起作用;

  • 设置变量传递参数的时候,有单位的一定要记得带上单位

再来举个混合的栗子吧:

.border_radius(@radius: 10px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

#box_radius_test {
    width: 500px;
    height: 500px;
    background: green;
    //带参混入,传参使用参,不传使用默认值
    .border_radius();
}

编译结果:

#box_radius_test {
    width: 500px;
    height: 500px;
    background: green;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

--------虽然感觉写东西,很浪费时间,但是每一次的总结,总会有新的意外收获,继续加油吧,呆萌小二郎!

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,465评论 1 85
  • 先安利我最近看的一部电视剧吧:《鸡毛飞上天》,讲浙江义乌小商品市场怎么发展起来的故事,以小积大呀,所以我们的基础一...
    Iris_mao阅读 230评论 0 6
  • 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide...
    老夫的天阅读 1,486评论 1 29
  • 1.less简介及less环境搭建,首先写less语法前不得不提下sass,之前不了解less和sass之前,这两...
    倘浩洋阅读 1,481评论 0 17
  • 便秘这件事真是令人尴尬又烦恼,尤其在冬季,天气寒冷干燥,肠道蠕动减慢,便秘发病率更是达到新高。便秘不仅影响人们的生...
    娟娟雅致阅读 167评论 5 22