如何寫美麗的薩斯

>乾淨，美麗的代碼應該是每個項目的目標。如果其他開發人員需要進行更改，他們應該能夠閱讀那裡的內容並理解它。可讀代碼是可維護性的核心，而邁向可讀代碼的第一步是一個很好的襯裡。就像一個良好的拼寫檢查器一樣，Linter應該捕獲您的所有小錯別字和格式化錯誤，因此不會讓其他人這樣做。這是與其他開發人員進行良好代碼審查之前的第一道防線。

> Sass有幾個出色的襯裡：SCSS-lint是Ruby Gem，而較新的Sasslint和Stylelint是NPM節點的NPM軟件包。兩者都允許您為項目配置伸長規則，例如最大嵌套級別，小數零以領先零以及塊中的屬性組織。您甚至可以根據需要創建自己的規則。

觀看Atoz：Sass 通過信函學習薩斯 觀看此課程 觀看此課程 SASS指南非常方便組織您的項目，設置襯裡，建立命名慣​​例等等。由雨果（Hugo）撰寫，這是您代碼的自以為是的式指導；它可能並非全部適合您，但這是一個開始的好地方。

>

如果您使用的是SASS變量，功能和Mixins，建議您記錄它們的工作方式。工具包的作者會發現這一點尤其重要，但是任何在項目中內置廣泛工具的人也應該考慮為團隊的文檔。 Hugo的另一個很棒的工具是Sassdoc，它是一個NPM軟件包，它可以解析您的SASS評論，並在您的文檔中生成一個漂亮的靜態網站。

>這是我們在Accoutrement-Colors中的TINT（..）功能的SASSDOC評論。它以一般描述開始，然後明確記錄每個參數和預期的返回：>

使用默認主題（從中可以選擇幾個主題，或者您可以設計自己的），sassdoc將其評論轉換為靜態網站，如下所示。

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

如果您使用功能或混合素進行任何復雜的事情，

測試也很重要。這是確保您的代碼不會在您進行調整時不會破壞您的代碼的好方法，但這也可能有助於開發新功能。如果首先編寫測試，您將確切知道該功能在測試通過時是否正常工作！ >

true是真正從您的單位測試工具包，用純Sass編寫，以便在任何地方都可以編譯SASS。核心測試發生在斷言函數中：斷言 - 等於（..），斷言（..），assert-true（..）和assert-false（..）。這些被組織為測試，可以分組為測試模塊。這是真實測試的一個例子 色調（..）函數：

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

編譯後，True將輸出帶有詳細結果的CSS註釋，並在任何測試失敗時在控制台中警告您：

<span>@include test-module('Tint [function]') {
</span>  <span>@include test('Adjusts the tint of a color') {
</span>    <span>@include assert-equal(
</span>      <span>tint('primary', 25%),
</span>      <span>mix(#fff, color('primary'), 25%),
</span>      <span>'Returns a color mixed with white at a given weight.');
</span>  <span>}
</span><span>}
</span>

在此示例中，兩個測試“輸出到CSS”是什麼意思？這些測試未顯示，但它們正在測試混合蛋白輸出。使用純CSS，True只能確認功能測試的結果，因此Mixin測試僅輸出到可以手動比較的CSS（總）或使用CSS Parser（更好！）。為了使這一簡單，真正的融合與摩卡（Mocha）等JavaScript測試跑步者，並具有由Scott Davis編寫的Ruby命令行界面。要么將完全解析CSS輸出，包括來自Mixins的輸出，並為您提供功能和Mixin測試的完整結果：

>

/* # Module: Tint [function] */
/* ------------------------- */
/* Test: Adjusts the tint of a color */
/*   ✔ Returns a color mixed with white at a given weight. */

/* … */

/* # SUMMARY ---------- */
/* 16 Tests: */
/*  - 14 Passed */
/*  - 0 Failed */
/*  - 2 Output to CSS */
/* -------------------- */

經常詢問有關編寫美麗的Sass

的問題

>我如何使用SASS創建嵌套規則？

SASS提供了獨特的功能，可讓您以遵循HTML相同的視覺層次結構的方式嵌套CSS選擇器。要創建嵌套規則，您只需將一個選擇器放在另一個選擇中即可。然後將內部選擇器應用於外部選擇器中嵌套的位置。這可以使您的代碼清潔器更容易理解。例如：

nav { ul { padding：0;
list-style：none;
}


{ display：inline-block; }

a {
display：block;
填充：6px 12px;
> text-decoration：none;
}
}
} }

使用SASS變量的好處？

SASS變量使您可以存儲想要在樣式表中重複使用的信息。您可以存儲諸如顏色，字體堆棧或任何CSS值之類的東西，您認為自己想重複使用。 Sass使用$符號將某些變量變量。這是一個示例：

$ font-stack：helvetica，sans-serif;
$ priendar-color：＃333;


hody {
font：100％$ font-- stack;
顏色：$ priendar-color;
}

>我如何將sass用於更好的代碼組織？

對於代碼組織可能非常有用。您可以創建持有CSS代碼段的部分SASS文件。這些文件以下劃線開頭，可以導入到其他SASS文件中。這使您可以對CSS進行模塊化並幫助保持更易於維護。

>如何使用SASS創建複雜的功能？

SASS通過提供一組內置功能（例如調整顏色或進行複雜的數學操作）來支持功能的使用。您還可以使用@Function指令定義自己的功能。這是一個簡單函數的示例：

@function double（$ number）{
@return $ number * 2;
}

.box {width { width：double（5px） ）； }

>我如何使用SASS創建Mixins？ 。它們是使用@mixin指令定義的。這是一個示例：

@mixin transform（$ property）{
-webkit -transform：$ property;
-MS -ms -transform：$ property;
transform：$ property ：$ property;
}

.box {@include transform（rotate（30deg））; }

>如何使用SASS創建擴展/繼承？

> SASS中的@Extend Directive允許一個選擇器繼承另一個選擇器的樣式。這是一個示例：

.message {

border：1px solid #ccc;
padding：10px;
顏色：＃333;
}
}



.success {
@extend .message;
border-color：green;
}

我如何使用sass創建運營商？

-， *， /， 和 ％。當使用尺寸和顏色時，這可能特別有用。以下是一個示例：

.container {width：100％; 。 w>寬度：300px / 960px * 100％;
}

>
>我如何使用SASS來創建控制指令？

SASS支持庫的控制指令，包括@If， @ @ @ @ @ @ @ @ @for ， @each和@while。這些可用於創建使用較少代碼的複雜樣式。這是一個示例：

@for $ i從1到3 {
.item-＃{$ i} {width：2em * $ i; }
}

>如何使用SASS創建註釋？ / * * /樣式註釋保留在CSS輸出中，其中AS // AS樣式註釋不包含在CSS輸出中。以下是一個示例：

/ *此註釋是
*長的幾行。
*，因為它使用CSS註釋語法，
*它將出現在CSS輸出中。 */
身體{顏色：黑色; }

//這些註釋不會出現在CSS輸出中。 //它們對於代碼文檔非常有用。 a {color：green; }

>我如何使用SASS創建插值？

在SASS中的插值使您可以將變量的值插入字符串中。它是使用＃{}語法完成的。這是一個示例：

$ name：foo;
$ attr：border; p。 ＃{$ name} {
＃{$ attr} -color：blue;
> }

以上是如何寫美麗的薩斯的詳細內容。更多資訊請關注PHP中文網其他相關文章！