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


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

原文地址:https://www.cnblogs.com/rubylouvre/p/3812724.html