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;
    }
  • 相关阅读:
    python 安装Crypto.Ciphe
    ProxyPool 爬虫代理IP池配置采坑
    2020渗透测试面试问题大全
    Windows Server 2016抓取明文密码
    应用安全 – 端口漏洞整理
    .net core docker+ gogs + jenkins 自动化部署
    .net HttpClient 回传实体帮助类
    .net list转树状结构
    ABP 临时禁用TenantId IsDelete过滤
    ABP 使用cache缓存
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9311806.html
Copyright © 2011-2022 走看看