zoukankan      html  css  js  c++  java
  • less混合

    混合(mixin)变量
    .border{
      border: 5px solid pink;
    }
    .box{
      width: 300px;height:300px;
      .border;
    }
    =>
    .border {
      border: 5px solid pink;
    }
    .box {
      width: 300px;
      height: 300px;
      border: 5px solid pink;
    }
    这个就叫做混合,在box里面有一段跟border的样式,把border直接拿过来就可以
    比如一个场景,两个div很像,只有唯一一行的样式的不一样的情况
    .box{
      width: 300px;
      height:300px;
      border:1px solid #abcdef;
    }
    .box2{
      .box;
      margin-left: 100px;
    }
    =>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid #abcdef;
    }
    .box2 {
      width: 300px;
      height: 300px;
      border: 1px solid #abcdef;
      margin-left: 100px;
    }

    像这种重用的样式,直接拿过来



    可带参数带混合
    .border(@border_width){
      border:@border_width solid pink;
    }
    .test_2{
      .border(30px)
    }
    =>
    .test_2 {
      border: 30px solid #ffc0cb;
    }
    可带参数时的默认值
    .border(@border_10px){
      border:@border_width solid pink;
    }
    .test{
      .border()
    }
    .test2{
      .border(20px)
    }
    =>
    .test {
      border: 10px solid #ffc0cb;
    }
    .test2 {
      border: 20px solid #ffc0cb;
    }
    没默认值是不带值会报错



    这个有什么好处,比如做一些兼容的时候
    .border_radius(@rds:5px){
      -webkit-border-radius:@rds;
      -moz-border-radius:@rds;
      border-radius: @rds;
    }
    .radius_test{
      width: 100px;
      height: 40px;
      background-color:pink;
      .border_radius();
    }
    =>
    .radius_test {
      width: 100px;
      height: 40px;
      -color: pink;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
  • 相关阅读:
    echarts各个配置项详细说明总结
    享元模式
    观察者模式
    策略模式
    桥接模式
    适配器模式
    建造者模式
    原型模式
    单例模式
    Java8新特性——集合底层源码实现的改变
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9311806.html
Copyright © 2011-2022 走看看