zoukankan      html  css  js  c++  java
  • 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; }
    
    
    

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

  • 相关阅读:
    名称空间与作用域
    3.19作业
    函数的参数
    文件的f.seek和文件修改方式以及函数的基本使用
    3.17作业
    文件处理
    3.16作业
    转 移动端-webkit-user-select:none导致input/textarea输入框无法输入
    移动端开发兼容性总结
    移动端input 无法获取焦点的问题
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3812724.html
Copyright © 2011-2022 走看看