• sass的类型判定


    由于sass的作者是rubyer,因此它的类型与JS有点不一样,但一样可以类推。

    @charset "utf-8";//必须设置了这个才能编译有中文的注释
    
    
    $gray: #333;//颜色
    $number: 12;//数字
    $boolean: true;
    $array:();
    $string:"string";
    $string2: 'string';
    $null:null;
    $map: (
        aa:1,
        bb:2
    );
    @mixin box-shadow($shadows) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
    }
    
    .aaa {
        content: type-of($gray);
    }
    .bbb {
        content: type-of($number);
    }
    .ccc{
        content: type-of($boolean);
    }
    .ddd {
        content: type-of($array);
    }
    .eee {
        content: type-of($string);
    }
    .fff {
        content: type-of($string2);
    }
    .ggg {
        content: type-of($null);
    }
    .hhh {
        content: type-of(type-of);
    }
    .iii {
        content: type-of($map);
    }
    .kkk {
        content: type-of(box-shadow);
    }
    //--------------------------------------
    .aaa {
      content: color; }
    
    .bbb {
      content: number; }
    
    .ccc {
      content: bool; }
    
    .ddd {
      content: list; }
    
    .eee {
      content: string; }
    
    .fff {
      content: string; }
    
    .ggg {
      content: null; }
    
    .hhh {
      content: string; }
    
    .iii {
      content: map; }
    
    .kkk {
      content: string; }
    
    

    可以看到sass的类型有null, string, bool, number, list, map, color这几种类型,如果直接拿内置函数的名字或@mixin函数放进type-of里,都是得到字符串。

    但type-of不能判定@function函数与@mixin函数,这时就需要用到function_exists, mixin_exists这两个方法了,但我觉得它们的名字起得不好,不是中杠线连在一起!

    @charset "utf-8";//必须设置了这个才能编译有中文的注释
    
    @mixin box-shadow($shadows) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
    }
    
    
    
    .testvar1{
         content: function_exists("type-of");
    }
    .testvar2{
         content: mixin_exists("box-shadow");
    }
    //--------------------------------------
    .testvar1 {
      content: true; }
    
    .testvar2 {
      content: true; }
    
    
    

    有了类型判定,我们就可以玩参数泛型化了。

  • 相关阅读:
    更改Linux时区的两种方法
    Azure上部署FTP服务
    log4j2简单使用
    elasticsearch5.5.2环境搭建
    springTask和Schedule学习
    防止SpringMVC拦截器拦截js等静态资源文件
    Mysql中使用FIND_IN_SET解决IN条件为字符串时只有第一个数据可用的问题
    ServletContext总结
    window.location.href和window.location.replace的区别
    javadoc文档
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3812724.html
Copyright © 2020-2023  润新知