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;
    }
  • 相关阅读:
    jxl读和取Excel文件
    Studio for WPF:定制 C1WPFChart 标记
    为C1Chart for WPF添加自定义标题、坐标轴单位标签以及旋转坐标轴注释
    自定义饼图(PieChart)各个PieSlice的外观
    vue组件
    vue双向绑定
    第一个Vue程序
    vue入门介绍
    js生成随机固定长度字符串的简便方法
    JavaScript 函数式编程读书笔记1
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9311806.html
Copyright © 2011-2022 走看看