美しいサスを書く方法

クリーンで美しいコードは、すべてのプロジェクトで目標である必要があります。他の開発者が変更を行う必要がある場合、そこにあるものを読んで理解できるはずです。読み取り可能なコードは保守性の中核であり、読み取り可能なコードへの最初のステップは良いリナーです。良いスペルチェッカーのように、リナーはあなたの小さなタイプミスとフォーマットの間違いをすべてキャッチする必要があるので、そうすることは他の人に任されていません。他の開発者との良いコードレビューの前の最初の防衛線です。

SASSにはいくつかの優れたリンジターがあります。SCSS-LINTはRubyの宝石であり、NODE用のNPMパッケージである新しいSasslintとStylelintがあります。どちらも、最大ネストレベル、小数のゼロをリードする、ブロック内のプロパティの組織など、プロジェクトの糸くずルールを構成することができます。必要に応じて独自のルールを作成することもできます Atozを見る：Sass 手紙でサスの手紙を学びます

このコースをご覧ください このコースをご覧ください SASSガイドラインは、プロジェクトの編成、リナーのセットアップ、命名規則の確立などに便利です。 Hugoによって書かれた、それはあなたのコードのための意見のあるStyleGuideです。それはすべてあなたのために働くとは限りませんが、始めるのに最適な場所です。

SASS変数、​​関数、およびミキシンを使用している場合は、それらの動作を文書化することをお勧めします。ツールキットの著者はそれが特に重要だと思うでしょうが、プロジェクトに組み込まれた広範なツールを持っている人も、チームのドキュメントを検討する必要があります。 Hugoのもう1つの優れたツールはSassdocです。Sassdocは、SASSコメントを解析し、ドキュメントで美しい静的サイトを生成するNPMパッケージです。

Accoutrement-Colorsの色合い（..）機能のSassdocコメントは次のとおりです。一般的な説明から始まり、各パラメーターと期待返品を明示的に文書化します。

デフォルトのテーマを使用して（選択するものがいくつかありますか、または自分でデザインすることができます）、Sassdocはそのコメントを静的Webサイトに変換します。

 <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-Equal（..）、Assert-unequal（..）、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コメントを詳細な結果で出力し、テストが失敗した場合にコンソールで警告します。

この例では、2つのテストが「CSSに出力」されたということはどういう意味ですか？これらのテストは表示されませんが、ミックス出力をテストしています。純粋なCSSを使用すると、Trueは関数テストの結果のみを確認できます。そのため、混合テストはCSSに単純に出力され、CSSを手動（グロス）またはCSSパーサー（より良い！）と比較できます。それを簡単にするために、TrueはMochaなどのJavaScriptテストランナーと統合され、Scott Davisが書いたRubyコマンドラインインターフェイスを持っています。どちらかがミックスからの出力を含む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>

美しいサスを書くことについてよく聞かれる質問

/* # 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は、HTMLの同じ視覚階層に従う方法でCSSセレクターをネストできるユニークな機能を提供します。ネストされたルールを作成するには、1つのセレクターを別のセレクター内に配置するだけです。内部セレクターは、外側セレクター内にネストされている場所に適用されます。これにより、コードがよりクリーンになり、理解しやすくなります。たとえば：

nav {

ul {
マージン：0;
パディング：0;
リストスタイル：none;
}

li {display：inline-block; }

a {ディスプレイ：block;
padding：6px 12px;
テキスト廃止：なし;
}
}

SASS変数を使用することの利点？

SASS変数により、スタイルシート全体で再利用する情報を保存できます。色、フォントスタック、または再利用したいと思うCSS値などを保存できます。 SASSは$シンボルを使用して、何かを変数にします。例は次のとおりです。

$ font-stack：helvetica、sans-serif;

$プライマリカラー：＃333;

body {
font：100％$ font- stack;
color：$ primary-color;
}

SASSをより良いコード組織に使用するにはどうすればよいですか？コード組織にとって非常に便利です。 CSSコードのセグメントを保持する部分的なSASSファイルを作成できます。これらのファイルはアンダースコアから始まり、他のSASSファイルにインポートできます。これにより、CSSをモジュール化し、物事を維持しやすくするのに役立ちます。SASSは、色の調整や複雑な数学操作の実行など、組み込み関数のセットを提供することにより、機能の使用をサポートします。 @Function Directiveを使用して独自の関数を定義することもできます。これが単純な関数の例です：

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

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

SASSを使用してミキシンを作成するにはどうすればよいですか？

SASSのミキシンは、あるルールセットから別のルールセットにあるルールセットにあるプロパティの束を含める（「ミキシング」）を含める方法です。 。 @mixinディレクティブを使用して定義されています。例は次のとおりです。

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

。 }

sassを使用して拡張/継承を作成するにはどうすればよいですか？

sassの@extendディレクティブにより、1つのセレクターが別のセレクターのスタイルを継承できます。例は次のとおりです。

.message {
border：1px solid #ccc;
padding：10px;
color：＃333;
}

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

sassを使用して演算子を作成するにはどうすればよいですか？ -、 *、 /、 そして ％。これは、サイズと色を使用する場合に特に役立ちます。例は次のとおりです。 }

.Article {

float：left;

width：600px / 960px * 100％;
}

.aside {
float：right;
幅：300px / 960px * 100％;
}

sassを使用して制御指令を作成するにはどうすればよいですか？ 、@each、 @While。これらを使用して、コードが少ない複雑なスタイルを作成できます。例は次のとおりです。1〜3 { .item - ＃{$ i} {width：2em * $ i; }
}

sassを使用してコメントを作成するにはどうすればよいですか？ / * * /スタイルのコメントは、//スタイルコメントがCSS出力に含まれていないCSS出力に保存されます。例は次のとおりです。

/ *このコメントは

*長さの数行です。

* CSSコメントSyntaxを使用しているため、

* CSS出力に表示されます。 */
body {color：black; }

//これらのコメントはCSS出力には表示されません。
//コードドキュメントに非常に役立ちます。 }

sassを使用して補間を作成するにはどうすればよいですか？

SASSの補間により、変数の値を文字列に挿入できます。 ＃{} syntaxを使用して行われます。例は次のとおりです。

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

以上が美しいサスを書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。