验证Sass Mixin和功能中的输入-css教程-PHP中文网

首页

web前端

css教程

验证Sass Mixin和功能中的输入

尊渡假赌尊渡假赌尊渡假赌

Feb 23, 2025 am 10:02 AM

Validating Input in Sass Mixins and Functions

核心要点

在 Sass mixin 和函数中验证输入至关重要，确保传入代码的数据类型和格式正确，有助于防止错误和 bug，并使代码更易于调试和维护。
Sass 提供了一些内置函数用于输入验证，例如 type-of()、unit() 和 unitless()。这些函数可用于检查输入数据的类型和单位，如果输入不符合预期标准，则会抛出错误。
可以在 Sass 中创建自定义验证函数以进行更复杂的验证检查。这涉及使用 @function 指令定义新函数，并使用 @return 指令根据验证检查返回一个值。
如果 Sass mixin 或函数中的输入验证失败，则会抛出错误，并停止 Sass 代码的编译。@error 指令可用于抛出自定义错误消息，提供有关错误性质以及如何修复错误的详细信息。

编写 Sass 并由其他人使用时，他们很可能在使用你的代码时出错。事实上，老实说，当我编写 Sass 并几天后（甚至几小时后）使用它时，我都会在自己的代码中犯错。你可能也会。幸运的是，Sass 有许多函数可以帮助我们验证开发者放入我们编写的 Sass 中的输入。

这些技术对于共享 Sass mixin 或维护入门工具包或一组 mixin 和函数的团队尤其有用。开发者在使用共享 Sass 库时有两个选择：他们可以通过电子邮件、聊天、ping 或其他方式打断彼此以寻求自定义 mixin 的帮助，或者使用包含代码验证的详细文档来帮助彼此轻松地排除代码故障。（就这一点而言，这不仅仅是 Sass 的问题：任何共享代码都需要通过中断或文档进行通信。）现在让我们学习一些最有用的 Sass 验证方法。

验证单个值

Mixin 和函数采用参数。如果你将代码传递给工作中的其他开发者或发布开源库，则需要确保参数与你的意图相符。这些函数对于验证参数中的变量很有用。

确保变量存在：`variable-exists()`

如果你的函数或 mixin 依赖于开发者定义的变量，请使用恰如其分的 variable-exists() 函数确保变量存在。此函数根据是否已创建和定义变量返回 true 或 false。

@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

但是，比依赖于开发者正确设置全局变量更好的选择是在你的库中包含这些默认变量：

// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}

检查值的类型：`type-of()`

如果你需要知道变量表示的值的类型，请使用 type-of()。此函数将返回以下字符串之一：

string
color
number
bool
null
list
map

这对于验证某些类型的输入很有用。你可以确保开发者只将数值传递给创建尺寸的 mixin：

@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

你还可以使用 type-of() 来确保颜色 mixin 只处理颜色：

// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}

如果你需要开发者为主题创建配置设置映射，你可以确保他们拥有有效的映射：

@mixin size($height, $width: $height) {
  @if type-of($height) == number {
    height: $height;
  } @else {
    @warn "确保 `$height` 是一个数字。";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "确保 `$width` 是一个数字。";
  }
}

确认数字的单位：`unit()`

有时，函数或 mixin 中的数学运算需要其参数中的特定单位。你可以使用 unit() 来确认值是否具有正确的单位。例如，你可能会使用一个 mixin 来创建像素和 rem 单位的尺寸。（注意，你最好为此使用任务运行程序包，但如果你需要将其保留在 Sass 中，请继续阅读。）

@function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "确保你将有效的颜色传递给 color-fade() 函数。";
  }
}

验证列表和映射

我们已经看到如何使用 type-of() 来确保变量包含列表或映射。我们还可以测试两件重要的事情：值是否在列表中，以及键是否在映射中。

在列表中查找值：`index()`

index() 函数将告诉你值是否在列表中找到。从技术上讲，它将返回值在列表中的位置（一个数字）或 null。它不是一个真正的布尔函数，但就我们在这里的目的而言，真值和假值就足够了。

index() 函数采用两个参数：列表和你想要在列表中查找的值。此函数对于测试测量 mixin 中的某些值很有用。如果我们有一个使用 CSS top、right、bottom 或 left 速记法输出填充或边距计算的 mixin，我们希望确保我们不会尝试计算 initial、inherit 或 auto 等值。

@mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // 此处输出
  } @else {
    @warn "确保 `$settings` 是一个 Sass 映射。";
  }
}

确保映射具有键：`map-has-key()`

如果你正在检查映射中的特定键，可以使用 map-has-key() 函数确保键存在于你正在检查的映射中。如果你使用 $breakpoints 映射和媒体查询 mixin，这将非常有用：

$rem-size: 16px !default;

@mixin px-rem($property, $value) {
  @if unit($value) == 'px' {
    #{$property}: $value;
    #{$property}: $value / $rem-size * 1rem;
  } @elseif unit($value) == 'rem' {
    #{$property}: $value * $rem-size / 1rem;
    #{$property}: $value;
  } @else {
    @warn "确保 `$value` 以 px 或 rem 为单位。";
  }
}

验证 Mixin 和函数

有时，你将编写一个依赖于现有 mixin 或函数或其他 Sass 库的 mixin 或函数。让我们更新上一个示例中的 bp() mixin 以依赖于 Breakpoint Sass 库。我们可以像这样扩展它：

$rem-size: 16px !default;

@mixin margin-rem($values...) {
  $output: ();
  @each $value in $values {
    @if index(auto inherit initial 0, $value) {
      $output: append($output, $value);
    } @else {
      $output: append($output, $value / $rem-size * 1rem);
    }
  }
  margin: #{$output};
}

现在我们的 bp() mixin（更短且使用映射值）将在其存在时使用 breakpoint() mixin。如果没有，它将回退到我们自己的媒体查询 mixin 代码。

有一个匹配的函数叫做 function-exists()。你可以用它来测试特定函数是否存在。如果你有依赖于非标准函数的数学运算，你可以确保包含包含该函数的库。Compass 添加了一个 pow() 函数用于指数数学。如果你正在创建需要该函数的字体大小比例，请对其进行测试：

@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

报告问题：@warn 和 @error

正如你在上面的代码示例中可能注意到的那样，当我们的验证捕获一些不正确的输入时，我已经注意向开发者提供良好的反馈。大多数情况下，我使用了 @warn。此指令将消息发送到开发者的控制台，但允许编译器完成运行。

有时，当我需要完全停止编译器时（没有特定的输入或函数，大量的输出将被破坏），我使用 @error 将消息发送到控制台并停止编译器。

有关 @warn 和 @error 之间区别的更多信息，你可能需要查看我之前关于此主题的文章或 SitePoint 的 Sass 参考中的相应部分。

结论

没有人是完美的——那些使用我们代码的人不是，甚至在我们编写代码几个小时后我们自己也不是！这就是为什么通过验证 mixin 和函数中的输入来帮助我们自己和他人非常重要的原因。这些技术不仅可以帮助你更有效地使用自己的代码，还可以使团队更容易共享和维护 Sass 库。

你如何防止 Sass 中的错误？请在评论中告诉我们！

关于在 Sass Mixin 和函数中验证输入的常见问题解答 (FAQ)

在 Sass mixin 和函数中验证输入的目的是什么？

在 Sass mixin 和函数中验证输入对于维护代码的完整性和功能至关重要。它有助于确保传递到 mixin 和函数中的数据类型正确，并且符合预期的格式。这可以防止代码中的错误和 bug，使其更强大、更可靠。它还可以使你的代码更易于调试和维护，因为你可以快速识别和纠正输入数据中的任何问题。

我如何在 Sass mixin 和函数中验证输入？

Sass 提供了一些内置函数，你可以使用这些函数来验证 mixin 和函数中的输入。其中包括 type-of()、unit() 和 unitless() 等。你可以使用这些函数来检查输入数据的类型和单位，如果输入不符合预期标准，则会抛出错误。例如，你可以使用 type-of() 函数来检查输入是否为数字，如果不是，则会抛出错误。