Sass Introspection函数

Posted 2021-06-28 书和咖啡

本节我们来看一下 Sass 中的 Introspection 函数，Introspection 函数一般用于代码的调试。

常用的 Introspection 函数：

函数	描述
call()	动态的调用一个
type-of()	返回一个值的类型
function-exists()	检测指定的函数是否存在
global-variable-exists()	检测某个全局变量是否定义
inspect()	返回一个字符串的表示形式，参数为一个 sass 表达式。
mixin-exists()	检测指定混入是否存在
unit()	返回传入数字的单位
unitless()	判断传入的数字是否带有单位，返回一个布尔值
variable-exists()	判断变量是否在当前的作用域下

call()函数

call() 函数用于动态的调用一个函数。被调用的函数可以是自定义的函数，也可以是内置函数或纯 CSS 函数。

示例：

例如我们动态调用一个 rgb() 函数：

.one {
    color: call(rgb, 225, 225, 255);
}

编译成 CSS 代码：

.one {
  color: #e1e1ff;
}

type-of() 函数

type-of() 函数用于返回一个值的数据类型。

示例：

例如下面这段代码：

.one{   
    font-size: type-of(12px);
    color: type-of(red);
    float: type-of(left);
}

编译成 CSS 代码：

.one {
  font-size: number;
  color: color;
  float: string;
}

从输出的 CSS 代码可以看出，12px 返回的是一个 number 数字类型，red 返回的是一个 color 颜色值类型，而 left 返回的则是一个字符串类型。

function-exists()函数

function-exists() 函数用于检测指定的函数是否存在。

示例：

例如我们检测几个不同的函数：

.one {
    content: function-exists(myfun);
    content: function-exists(rgba);
    content: function-exists(lighten);
}

编译成 CSS 代码：

.one {
  content: false;
  content: true;
  content: true;
}

上述代码中，rgba 和 lighten 都是 Sass 中的内置函数，所以输出结果为 false。而 myfun 是一个不存在的函数，所以输出结果为 true。

global-variable-exists() 函数

global-variable-exists() 函数用于检测某个全局变量是否定义。

示例：

$global_a:red;  // 全局变量

.one {
    $a:blue;  // 局部变量
    content:global-variable-exists(global_a);
    content: global-variable-exists(a);
}

编译成 CSS 代码：

.one {
  content: true;
  content: false;
}

上述代码中， global-variable-exists() 函数是用于检测某个全局变量是否定义，所以只有 $global_a 变量的检测结果才会返回 true，因为变量 $a 为局部变量，所以检测结果返回 false。

mixin-exists() 函数

mixin-exists() 函数检测指定混入（Mixins）是否存在。如果存在则返回 true，不存在则返回 false。

示例：

@mixin myMixin{
    font-size: 14px;
}
.one {
    content:mixin-exists(myMixin);
    content: mixin-exists(testMixin);
}

编译成 CSS 代码：

.one {
  content: true;
  content: false;
}

上述代码中，我们定义了一个混入 myMixin，所以在使用 mixin-exists() 函数检测混入是否存在时，会返回 true。而 testMixin 是一个不存在的混入，所以会返回一个 false。

unit() 函数

unit() 函数返回传入数字的单位。

示例：

例如下面这段代码：

.one {
    font-size:unit(14px);
    text-indent: unit(2em);
    height: unit(10cm);
}

编译成 CSS 代码：

.one {
  font-size: "px";
  text-indent: "em";
  height: "cm";
}

unitless() 函数

unitless() 函数判断传入的数字是否带有单位，如果不带单位则返回 true，带有单位则返回 false。

示例：

.one {
    font-size:unitless(14px);
    width: unitless(10);
    height:unitless(100mm);
}

编译成 CSS 代码：

.one {
  font-size: false;
  width: true;
  height: false;
}

可以看到，只有 width 属性的值返回 true，其他值都返回 false。

variable-exists() 函数

variable-exists() 函数判断变量是否在当前的作用域下。

示例：

$a:100;  // 全局变量
.one {
    $b:200; // 局部变量
    content: variable-exists(a);
    content: variable-exists(b);
    content: variable-exists(c);
    .two{
        $c:300; // 局部变量
    }
}

编译成 CSS 代码：

.one {
  content: true;
  content: true;
  content: false;
}

上述代码中，变量 $a 是一个全局变量，作用域在全局范围内，所以返回结果为 true。而变量 $b 是在 .one 选择器中定义的，所以返回的也是 true。就只有变量 $c 的作用域在 .two 选择器中，在 .one 中不能使用，所以返回的是一个 false。

链接：https://www.9xkd.com/