核心要點

• 在 Sass mixin 和函數(shù)中驗證輸入至關(guān)重要，確保傳入代碼的數(shù)據(jù)類型和格式正確，有助于防止錯誤和 bug，并使代碼更易于調(diào)試和維護。
• Sass 提供了一些內(nèi)置函數(shù)用于輸入驗證，例如 type-of()、unit() 和 unitless()。這些函數(shù)可用于檢查輸入數(shù)據(jù)的類型和單位，如果輸入不符合預(yù)期標準，則會拋出錯誤。
• 可以在 Sass 中創(chuàng)建自定義驗證函數(shù)以進行更復(fù)雜的驗證檢查。這涉及使用 @function 指令定義新函數(shù)，并使用 @return 指令根據(jù)驗證檢查返回一個值。
• 如果 Sass mixin 或函數(shù)中的輸入驗證失敗，則會拋出錯誤，并停止 Sass 代碼的編譯。@error 指令可用于拋出自定義錯誤消息，提供有關(guān)錯誤性質(zhì)以及如何修復(fù)錯誤的詳細信息。

編寫 Sass 并由其他人使用時，他們很可能在使用你的代碼時出錯。事實上，老實說，當我編寫 Sass 并幾天后（甚至幾小時后）使用它時，我都會在自己的代碼中犯錯。你可能也會。幸運的是，Sass 有許多函數(shù)可以幫助我們驗證開發(fā)者放入我們編寫的 Sass 中的輸入。

這些技術(shù)對于共享 Sass mixin 或維護入門工具包或一組 mixin 和函數(shù)的團隊尤其有用。開發(fā)者在使用共享 Sass 庫時有兩個選擇：他們可以通過電子郵件、聊天、ping 或其他方式打斷彼此以尋求自定義 mixin 的幫助，或者使用包含代碼驗證的詳細文檔來幫助彼此輕松地排除代碼故障。（就這一點而言，這不僅僅是 Sass 的問題：任何共享代碼都需要通過中斷或文檔進行通信。）現(xiàn)在讓我們學(xué)習(xí)一些最有用的 Sass 驗證方法。

驗證單個值

Mixin 和函數(shù)采用參數(shù)。如果你將代碼傳遞給工作中的其他開發(fā)者或發(fā)布開源庫，則需要確保參數(shù)與你的意圖相符。這些函數(shù)對于驗證參數(shù)中的變量很有用。

確保變量存在：variable-exists()

如果你的函數(shù)或 mixin 依賴于開發(fā)者定義的變量，請使用恰如其分的 variable-exists() 函數(shù)確保變量存在。此函數(shù)根據(jù)是否已創(chuàng)建和定義變量返回 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`。";
  }
}

// 開發(fā)者的代碼
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

但是，比依賴于開發(fā)者正確設(shè)置全局變量更好的選擇是在你的庫中包含這些默認變量：

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

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

// 開發(fā)者的代碼：
$base-font: 16px;
p {
  @include create-font-size();
}

檢查值的類型：type-of()

如果你需要知道變量表示的值的類型，請使用 type-of()。此函數(shù)將返回以下字符串之一：

• string
• color
• number
• bool
• null
• list
• map

這對于驗證某些類型的輸入很有用。你可以確保開發(fā)者只將數(shù)值傳遞給創(chuàng)建尺寸的 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`。";
  }
}

// 開發(fā)者的代碼
$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() {
  //等等...
}

// 開發(fā)者的代碼：
$base-font: 16px;
p {
  @include create-font-size();
}

如果你需要開發(fā)者為主題創(chuàng)建配置設(shè)置映射，你可以確保他們擁有有效的映射：

@mixin size($height, $width: $height) {
  @if type-of($height) == number {
    height: $height;
  } @else {
    @warn "確保 `$height` 是一個數(shù)字。";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "確保 `$width` 是一個數(shù)字。";
  }
}

確認數(shù)字的單位：unit()

有時，函數(shù)或 mixin 中的數(shù)學(xué)運算需要其參數(shù)中的特定單位。你可以使用 unit() 來確認值是否具有正確的單位。例如，你可能會使用一個 mixin 來創(chuàng)建像素和 rem 單位的尺寸。（注意，你最好為此使用任務(wù)運行程序包，但如果你需要將其保留在 Sass 中，請繼續(xù)閱讀。）

@function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "確保你將有效的顏色傳遞給 color-fade() 函數(shù)。";
  }
}

驗證列表和映射

我們已經(jīng)看到如何使用 type-of() 來確保變量包含列表或映射。我們還可以測試兩件重要的事情：值是否在列表中，以及鍵是否在映射中。

在列表中查找值：index()

index() 函數(shù)將告訴你值是否在列表中找到。從技術(shù)上講，它將返回值在列表中的位置（一個數(shù)字）或 null。它不是一個真正的布爾函數(shù)，但就我們在這里的目的而言，真值和假值就足夠了。

index() 函數(shù)采用兩個參數(shù)：列表和你想要在列表中查找的值。此函數(shù)對于測試測量 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() 函數(shù)確保鍵存在于你正在檢查的映射中。如果你使用 $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 和函數(shù)

有時，你將編寫一個依賴于現(xiàn)有 mixin 或函數(shù)或其他 Sass 庫的 mixin 或函數(shù)。讓我們更新上一個示例中的 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};
}

現(xiàn)在我們的 bp() mixin（更短且使用映射值）將在其存在時使用 breakpoint() mixin。如果沒有，它將回退到我們自己的媒體查詢 mixin 代碼。

有一個匹配的函數(shù)叫做 function-exists()。你可以用它來測試特定函數(shù)是否存在。如果你有依賴于非標準函數(shù)的數(shù)學(xué)運算，你可以確保包含包含該函數(shù)的庫。Compass 添加了一個 pow() 函數(shù)用于指數(shù)數(shù)學(xué)。如果你正在創(chuàng)建需要該函數(shù)的字體大小比例，請對其進行測試：

@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`。";
  }
}

// 開發(fā)者的代碼
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

報告問題：@warn 和 @error

正如你在上面的代碼示例中可能注意到的那樣，當我們的驗證捕獲一些不正確的輸入時，我已經(jīng)注意向開發(fā)者提供良好的反饋。大多數(shù)情況下，我使用了 @warn。此指令將消息發(fā)送到開發(fā)者的控制臺，但允許編譯器完成運行。

有時，當我需要完全停止編譯器時（沒有特定的輸入或函數(shù)，大量的輸出將被破壞），我使用 @error 將消息發(fā)送到控制臺并停止編譯器。

有關(guān) @warn 和 @error 之間區(qū)別的更多信息，你可能需要查看我之前關(guān)于此主題的文章或 SitePoint 的 Sass 參考中的相應(yīng)部分。

結(jié)論

沒有人是完美的——那些使用我們代碼的人不是，甚至在我們編寫代碼幾個小時后我們自己也不是！這就是為什么通過驗證 mixin 和函數(shù)中的輸入來幫助我們自己和他人非常重要的原因。這些技術(shù)不僅可以幫助你更有效地使用自己的代碼，還可以使團隊更容易共享和維護 Sass 庫。

你如何防止 Sass 中的錯誤？請在評論中告訴我們！

關(guān)于在 Sass Mixin 和函數(shù)中驗證輸入的常見問題解答 (FAQ)

在 Sass mixin 和函數(shù)中驗證輸入的目的是什么？

在 Sass mixin 和函數(shù)中驗證輸入對于維護代碼的完整性和功能至關(guān)重要。它有助于確保傳遞到 mixin 和函數(shù)中的數(shù)據(jù)類型正確，并且符合預(yù)期的格式。這可以防止代碼中的錯誤和 bug，使其更強大、更可靠。它還可以使你的代碼更易于調(diào)試和維護，因為你可以快速識別和糾正輸入數(shù)據(jù)中的任何問題。

我如何在 Sass mixin 和函數(shù)中驗證輸入？

Sass 提供了一些內(nèi)置函數(shù)，你可以使用這些函數(shù)來驗證 mixin 和函數(shù)中的輸入。其中包括 type-of()、unit() 和 unitless() 等。你可以使用這些函數(shù)來檢查輸入數(shù)據(jù)的類型和單位，如果輸入不符合預(yù)期標準，則會拋出錯誤。例如，你可以使用 type-of() 函數(shù)來檢查輸入是否為數(shù)字，如果不是，則會拋出錯誤。

我可以在 Sass 中創(chuàng)建自定義驗證函數(shù)嗎？

是的，你可以在 Sass 中創(chuàng)建自定義驗證函數(shù)。如果你需要執(zhí)行無法使用內(nèi)置函數(shù)實現(xiàn)的更復(fù)雜的驗證檢查，這將非常有用。要創(chuàng)建自定義驗證函數(shù)，只需使用 @function 指令定義一個新函數(shù)，然后使用 @return 指令根據(jù)驗證檢查返回一個值。

如果 Sass mixin 或函數(shù)中的輸入驗證失敗會發(fā)生什么？

如果 Sass mixin 或函數(shù)中的輸入驗證失敗，則會拋出錯誤，并且 Sass 代碼的編譯將停止。這可以幫助你快速識別和糾正輸入數(shù)據(jù)中的任何問題，防止最終 CSS 輸出中的 bug 和錯誤。

我如何在 Sass mixin 和函數(shù)中處理錯誤？

Sass 提供了 @error 指令，當輸入驗證失敗時，你可以使用此指令來拋出自定義錯誤消息。這對于調(diào)試特別有用，因為你可以提供有關(guān)錯誤性質(zhì)以及如何修復(fù)錯誤的詳細信息。

我可以將 Sass 自省函數(shù)用于輸入驗證嗎？

是的，Sass 自省函數(shù)可用于輸入驗證。這些函數(shù)允許你檢查輸入數(shù)據(jù)的類型、單位和其他屬性，并且可以與 @error 指令結(jié)合使用，當輸入不符合預(yù)期標準時，可以拋出自定義錯誤消息。

在 Sass mixin 和函數(shù)中驗證輸入的一些常見用例是什么？

在 Sass mixin 和函數(shù)中驗證輸入可用于各種場景。例如，你可能希望確保傳遞到 mixin 中的顏色值是有效的顏色，或者傳遞到函數(shù)中的數(shù)字具有正確的單位。輸入驗證還可以用于在代碼中強制執(zhí)行某些約束或規(guī)則，例如確保始終提供某個參數(shù)，或者某個值在特定范圍內(nèi)。

我可以測試 Sass 中是否存在 mixin 嗎？

是的，你可以使用 mixin-exists() 函數(shù)測試 Sass 中是否存在 mixin。如果 mixin 存在，此函數(shù)返回 true，否則返回 false。這對于防止代碼中的錯誤非常有用，因為你可以在嘗試包含 mixin 之前檢查其是否存在。

我如何在 Sass 中使用 unit() 函數(shù)進行輸入驗證？

Sass 中的 unit() 函數(shù)返回數(shù)字的單位。你可以在輸入驗證中使用此函數(shù)來檢查數(shù)字是否具有正確的單位。例如，你可能希望確保傳遞到 mixin 中的長度值以像素為單位，或者傳遞到函數(shù)中的時間值以秒為單位。

在 Sass mixin 和函數(shù)中驗證輸入的一些最佳實踐是什么？

在 Sass mixin 和函數(shù)中驗證輸入的一些最佳實踐包括：始終驗證輸入數(shù)據(jù)；盡可能使用內(nèi)置 Sass 函數(shù)進行驗證；為更復(fù)雜的檢查創(chuàng)建自定義驗證函數(shù)；使用 @error 指令拋出自定義錯誤消息；并徹底測試你的代碼以確保驗證檢查正常工作。

以上是驗證Sass Mixin和功能中的輸入的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！