zoukankan      html  css  js  c++  java
  • Less-mixin函数基础一

    //mixin函数
    
    立即执行mixin函数,example:
    .test{
        color:#ff00000;
        background:red;
    }
    
    //立即执行mixin grammar 1 扩展extend
    .study{
        &:extend(.test);
    }
    
    //输出css
    .test,
    .study {
      color: #ff0000;
      background: red;
    }
    
    //立即执行mixin grammar 2:
    .study{
        .test;
    }
    
    //输出css
    .test {
      color: #ff0000;
      background: red;
    }
    .study {
      color: #ff0000;
      background: red;
    }
    
    小结:扩展比直接调用mixin函数更利于简化代码
    
    
    非立即执行mixin函数,example:
    .test(){
        color:#ff0000;
        background:red;
    }
    
    //执行 grammar 1
    .study{
        .test;
    }
    
    //执行 grammar 2
    .study{
        .test();
    }
    
    小结:当调用mixin时,括号是可选的,定义mixin函数有利于减少css大小
    
    
    minxin组合使用,example:
    .test(){
        color:#ff0000;
        background:red;
    }
    
    //grammar 1
    .study{
        .test;
    }
    .study2:extend(.study){}
    
    //grammar 2
    .study,.study2{
        .test;
    }
    
    //输出css
    .study,
    .study2 {
      color: #ff0000;
      background: red;
    }
    
    小结:extend中不能调用mixin函数,错误用法( .study:extend(.test){}

    作者:leona

    原文链接:http://www.cnblogs.com/leona-d/p/6296453.html

    版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接

  • 相关阅读:
    API协议
    执行聚合
    执行过滤
    执行查询
    介绍查询语言
    探索你的数据
    探索你的集群(翻译)
    es6.4基本概念(中文翻译)
    Python3.7.4安装
    elasticsearch常用请求
  • 原文地址:https://www.cnblogs.com/leona-d/p/6296453.html
Copyright © 2011-2022 走看看