Angular プロジェクトで SASS スタイルを使用する方法-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2022-05-09 10:51:08

転載

2408 人が閲覧しました

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 プロジェクトで SASS スタイルを使用する方法を選択して確認します。とても簡単です。

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

スケルトンは次のようになります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><div id="demo"> <div class="inner"> <span class="prefix">Mr.</span> </div> <div class="inner"> <span class="name">Jimmy<span> </div> </div></pre><div class="contentsignin">ログイン後にコピー</div></div>スタイルは次のようになります:

#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 変数操作を記述するのと同じように、単位を持ち込むこともできます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">width: 100px / 400px * 100%l;</pre><div class="contentsignin">ログイン後にコピー</div></div> これらの基本的な演算子に加えて、sass には次のような多くのメソッドも用意されています。 as

String

関数: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">to-upper-case(&#39;italic&#39;); // ITALIC</pre><div class="contentsignin">ログイン後にコピー</div></div>色の透明度を変更する別の例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">#demo { background-color: transparentize($black, 0.5) }</pre><div class="contentsignin">ログイン後にコピー</div></div>

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 サイトの他の関連記事を参照してください。