Angular プロジェクトで SASS スタイルを使用する方法

Angular プロジェクトで SASS スタイルを使用するにはどうすればよいですか?次の記事では、Angular で SASS スタイルを使用する方法を紹介します。

Angular カスタム命令ツールチップ の記事で、sass スタイルに関する記事を公開すると述べましたが、現在はその記事が公開されています。到来。

フロントエンドの 3 人の剣士のうちの 1 つである Cascading Style Sheets (CSS) は、HTML スケルトンを洗練させたものです。ただし、ネイティブに作成するスタイルには繰り返しコードが多く含まれ、ロジックが明確ではありません。

その後、CSS の拡張言語を使用してそれを記述し、保守できます。現在フロントエンドの世界で人気のある 2 つの CSS 拡張言語は、less と sass です。この記事では sass について説明します。

less は似ていますが、sass はより成熟しています

SASS は 2 つの記述構文を提供します。1 つは .scss です。接尾辞、もう 1 つは .sass が接尾辞です。

• .scss はサフィックスで、構文は {} です。接尾辞が付いており、構文は「縮小メソッド」です。
• .scss の使用を推奨します。

プロジェクト統合

angular プロジェクトはスキャフォールディングを使用して生成されます。スタイルを追加するステップでは、スタイルの記述方法を尋ねられ、選択することができます:

SCSS を選択して確認します。とても簡単です。

angular での記述スタイルは、コンポーネント スタイルとグローバル スタイルに分類できます。 [関連チュートリアルの推奨事項: "

angular チュートリアル

"]コンポーネント スタイル

コンポーネント スタイルは、コンポーネントが個別に所有され、他のコンポーネントが個別に所有されることを意味します。など、有効にならない場合は、ng compoent Demon:

- demo.component.ts
- demo.component.html
- demo.component.scss
- deom.component.spec.ts

を通じてコン​​ポーネントを生成します。ここで、demo.compoent.scss は

deom のスタイル シートです。

。 グローバル スタイル

angular スキャフォールディングによって生成されたプロジェクトは、デフォルトでグローバル スタイルを

src/style.scss

ファイルに保存します。 。このファイルで変更されたスタイルは、アプリケーション全体のスタイルに影響します。 Sass Key Grammar

日々の開発作業において、より重要な内容を紹介します。

1. 変数の使用

変数を使用すると、複数のページまたはページ上の複数の場所で変数を呼び出すことができます。

// _varible.scss
// **** COLORS ****
$black: #000000;
$white: #ffffff;
$dark-green: #007f7f;
// **** usage ****
$primary-color: $dark-green;

変数メソッドをファイルで管理します。使用する必要がある場合は、直接

@import

インポートして使用できます:

@import "path/to/varible.scss";

#demo {
  color: $primary-color; // 调用
}

2ネストを使用します

css スタイルを使用する場合、さまざまな要素のスタイルを記述する必要があります。要素のレベルを考慮して、さまざまなスタイルを使用する必要があります。重みは変更されます。 。

スケルトンは次のようになります: <pre class="brush:html;toolbar:false;">&lt;div id=&quot;demo&quot;&gt; &lt;div class=&quot;inner&quot;&gt; &lt;span class=&quot;prefix&quot;&gt;Mr.&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;inner&quot;&gt; &lt;span class=&quot;name&quot;&gt;Jimmy&lt;span&gt; &lt;/div&gt; &lt;/div&gt;</pre>スタイルは次のようになります:

#demo .inner .prefix {
  color: red;
  font-size: 11px;
}
#demo .inner .name {
  font-size: 14px;
}

これで、明確なロジックと読みやすいネストされた記述を使用できるようになります:

#demo {
  .inner{
    .prefix {
      color: red;
      font-size: 11px;
    }
    .name {
      font-size: 14px;
    }
  }
}

3. 計算を使用します

sass は、

、-、*、/、%

などの一連の演算子を提供します。 javascript 変数操作を記述するのと同じように、単位を持ち込むこともできます。 <pre class="brush:js;toolbar:false;">width: 100px / 400px * 100%l;</pre> これらの基本的な演算子に加えて、sass には次のような多くのメソッドも用意されています。 as

String

関数: <pre class="brush:js;toolbar:false;">to-upper-case(&amp;#39;italic&amp;#39;); // ITALIC</pre>色の透明度を変更する別の例: <pre class="brush:js;toolbar:false;">#demo { background-color: transparentize($black, 0.5) }</pre>

4. ミックスイン ミキサーを使用する

スタイルを記述するときは、複数のクラスで同じスタイルのコンテンツを呼び出します。例:

.demo {
  font-size: 12px;
  color: red;
}
.another_demo {
  font-size: 12px;
  color: blue;
}

mixin

を使用して書き換えます:

@mixin common-style {
  font-size: 12px;
}

.demo {
  @include common-style;
  color: red;
}
.another_demo {
  @include common-style;
  color: blue;
}

mixin を使用して公開コードを抽出します。これは変更するのに便利です。 、複数の場所で 1 つの場所を変更します。もちろん、

extend

サーブにもこの効果があります。 5. 拡張継承を使用します

たとえば、前のクラスのスタイルを継続できます: 元のスケルトンとスタイル:

<span class="prefix name">Hello, Jimmy.</span>

.prefix {
  font-size: 12px;
}
.name {
  color: red;
}

書き換え後:

<span class="name">Hello, Jimmy.</span>

.prefix {
 font-size: 12px;
}
.name {
  @extend .prefix
  color: red;
}

日常の開発では、上記のスキルをマスターすれば、スタイルの記述を簡単に扱うことができます~

[終了]

更新済みプログラミング関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がAngular プロジェクトで SASS スタイルを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。