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;
    }
  • 相关阅读:
    产品 | What's产品经理
    产品 | 互联网+“加油”
    微信小程序 | 未来O2O电商的“阴谋”
    推荐书籍 | 产品必备书籍
    iOS | NSProxy
    iOS | 解决中文乱码
    HTML DOM addEventListener() 方法
    给每个对象加上新的属性
    vue.config.js基础配置
    SEO要点
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9311806.html
Copyright © 2011-2022 走看看