角度とsass

Angleのビューカプセル化(各コンポーネントが自分のCSSスタイルシートを持っている場合)の問題の1つは、それがマイナーな調整に適しているということです.実際にアングルは廃止されました.回避についてはこちらをご覧ください.

角度10 -使用しないでください

ジョンピーターズ・ 月3日・ 3分読む

#angular #typescript

サバ
SASSの美しさは、それが念頭に置いて専門的に設計されています.これは、スタイル構造を正しく指定すると、ページ上の任意の要素に到達し、ウィルを調整できます.コンポーネントのスタイルシートでそれをしようとすると、これ以上の日数と時間.
プロジェクトにはコアが必要です.SCSSスタイル
我々のプロジェクトがルートディレクトリにSASS(core . scss)を使用するならば、我々は我々が望むほど深く我々の構成要素のどれにでも達する能力を持ちます.
これは、スタイリング再利用可能なコンポーネントに光を投げかける.開始するには、当社のコア.SCSSファイルは、各コンポーネントの既定のスタイルを持つ必要があります.
各コンポーネントベーススタイル

app-custom-component {
  display: grid;
  justify-content: start;
  .buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1em, 1fr));
    width: 3.5em;
    justify-self: end;
    font-size: 1em;
    margin-left: 1em;
  }
}

各再使用コンポーネント調整
そのコンポーネントの再利用のための連続した調整が続きます.

//the main component contains the custom component

app-main-component{
  app-custom-component { 
    // minor adjustment here
    justify-content: end;
     .buttons {
       // minor adjustment here  
       width: 7em;
    }
 }
}

不可避債務
残念ながら、上記のようにルートのSCSSを使用することにおけるこの問題は、我々が巨大なモノリス構造をつくっているということです.彼らはセグメント化されているにもかかわらず、それはスタイリングの2000行を持っているのは簡単です.メンテナンスのために完璧ではなく、どのようにsassが動作するために動作可能です.
あなた自身を支持してください、そして、あなたにスタイル・ハートタルトのトンを保存します.
CSSスツール