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; }
    
    
    

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

  • 相关阅读:
    搭建自己的博客(三十一):为评论以及回复添加邮箱提醒
    gl-transitions 【68个转场效果图】
    frei0r-1.7.0 20191207-0d4b342 DLLs
    Win10资源管理器始终使用详细视图模式
    gcc posix sjij for MSYS 9.2.1+
    mingw32-gcc-9.2.1-i686-posix-sjlj-20190904-8ba5c53
    Newtonsoft.Json高级用法
    在线文档预览方案-office web apps
    我的前端学习历程
    我是怎么使用最短路径算法解决动态联动问题的
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3812724.html
Copyright © 2011-2022 走看看