核心要點(diǎn)

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

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

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

驗(yàn)證單個(gè)值

Mixin 和函數(shù)採用參數(shù)。如果你將代碼傳遞給工作中的其他開發(fā)者或發(fā)布開源庫，則需要確保參數(shù)與你的意圖相符。這些函數(shù)對於驗(yàn)證參數(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è)置全局變量更好的選擇是在你的庫中包含這些默認(rèn)變量：

// 你的插件：
$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

這對於驗(yàn)證某些類型的輸入很有用。你可以確保開發(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` 是一個(gè)數(shù)字。";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "確保 `$width` 是一個(gè)數(shù)字。";
  }
}

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

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

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

驗(yàn)證列表和映射

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

在列表中查找值：index()

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

index() 函數(shù)採用兩個(gè)參數(shù)：列表和你想要在列表中查找的值。此函數(shù)對於測試測量 mixin 中的某些值很有用。如果我們有一個(gè)使用 CSS top、right、bottom 或 left 速記法輸出填充或邊距計(jì)算的 mixin，我們希望確保我們不會嘗試計(jì)算 initial、inherit 或 auto 等值。

@mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // 此處輸出
  } @else {
    @warn "確保 `$settings` 是一個(gè) 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 為單位。";
  }
}

驗(yàn)證 Mixin 和函數(shù)

有時(shí)，你將編寫一個(gè)依賴於現(xiàn)有 mixin 或函數(shù)或其他 Sass 庫的 mixin 或函數(shù)。讓我們更新上一個(gè)示例中的 bp() mixin 以依賴於 Breakpoint Sass 庫。我們可以像這樣擴(kuò)展它：

$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（更短且使用映射值）將在其存在時(shí)使用 breakpoint() mixin。如果沒有，它將回退到我們自己的媒體查詢 mixin 代碼。

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

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

報(bào)告問題：@warn 和 @error

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

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

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

結(jié)論

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

你如何防止 Sass 中的錯(cuò)誤？請?jiān)谠u論中告訴我們！

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

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

在 Sass mixin 和函數(shù)中驗(yàn)證輸入對於維護(hù)代碼的完整性和功能至關(guān)重要。它有助於確保傳遞到 mixin 和函數(shù)中的數(shù)據(jù)類型正確，並且符合預(yù)期的格式。這可以防止代碼中的錯(cuò)誤和 bug，使其更強(qiáng)大、更可靠。它還可以使你的代碼更易於調(diào)試和維護(hù)，因?yàn)槟憧梢钥焖僮R別和糾正輸入數(shù)據(jù)中的任何問題。

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

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

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

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

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

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

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

Sass 提供了 @error 指令，當(dāng)輸入驗(yàn)證失敗時(shí)，你可以使用此指令來拋出自定義錯(cuò)誤消息。這對於調(diào)試特別有用，因?yàn)槟憧梢蕴峁┯嘘P(guān)錯(cuò)誤性質(zhì)以及如何修復(fù)錯(cuò)誤的詳細(xì)信息。

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

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

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

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

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

是的，你可以使用 mixin-exists() 函數(shù)測試 Sass 中是否存在 mixin。如果 mixin 存在，此函數(shù)返回 true，否則返回 false。這對於防止代碼中的錯(cuò)誤非常有用，因?yàn)槟憧梢栽趪L試包含 mixin 之前檢查其是否存在。

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

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

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

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

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