収集する価値のある CSS プリプロセッサ scss の使い方のまとめ

この記事では、CSS プロセッサ scss に関する関連知識を提供します。CSS プリプロセッサは、特別なプログラミング言語を使用していくつかのプログラミング機能を CSS に追加し、CSS をターゲットとして使用してファイルを生成します。その後、開発者はこの言語を使用するだけで済みます。コーディング作業用。みんなが助けてくれることを願っています。

1. CSS プリプロセッサが表示されるのはなぜですか?

– CSS はプログラミング言語ではありません。Web サイトのスタイルを記述するためにのみ使用できます。 Web の黎明期。当時、Web サイトの構築はまだ比較的基本的であり、必要なスタイルは非常に単純なものが多かったです。しかし、ユーザーニーズの増大やWebサイト技術の向上に伴い、CSSという静的な記述方法では徐々に満足できなくなってきました。 js のようなプログラミング言語のすべての変数、定数、その他のプログラミング構文がなければ、CSS コードは必然的に肥大化して保守が困難になります。しかし、CSS に代わるものはないため、CSS プリプロセッサは CSS の拡張としてフロントエンド テクノロジに登場します。

---

2. 一般的な CSS プリプロセッサ

– これまでのところ、CSS プリプロセッサ技術はかなり成熟しており、多くの異なる CSS プリプロセッサ言語が登場しています。現在主流なのは Sass (Scss)、Less、Stylus の 3 つです。

---

3. CSS プリプロセッサの利便性

-Sass を例に挙げます

-Sass の主な機能は次のとおりです: 変数の定義と CSS コードの許可ネスト、関数、ミックスイン、継承など。これらの関数により、CSS の記述がプログラミング言語の習慣とより一致し、CSS コードがより再利用可能になり、コード関数がより直観的になり、プログラマが読みやすく保守しやすくなります。

---

4. Sass プリプロセッサ

変数

Sass では、コードを再利用するための変数を定義できます。$ を使用します。変数の定義。同じ属性を使用するコード ブロックがある場合、変数を定義して、再利用された属性を変数に格納できます。特定の属性値を一律に変更する必要がある場合、コード内で変更が必要な属性を 1 つずつ見つける必要はなく、変数を直接変更できます。

公開コンポーネントのドラッグ指示では、コンポーネントの境界線のスタイルが個別に設定されます。このスタイルは、コンポーネント内のパーツを区切る境界線にも使用されます。したがって、スタイルを変数に保存して再利用できます。

/deep/ .borderLayout.showBorder{
border: 1px solid #EBEEF5
}
/deep/.borderLayout > p.showBorder.left {
border-right: 1px solid #EBEEF5;
}

scss によるネスト ルールは次のように変更できます。

$border: 1px solid #EBEEF5
/deep/ .borderLayout.showBorder{
border: $border
}
/deep/.borderLayout > p.showBorder.left {
border-right: $border;
}

---

Nesting

–Sass では、子孫の選択に対してコードのネストが可能です。 CSS のネイティブ子孫セレクターと比較して、ネストされたスタイル コードはより直感的です。

/deep/ .ant-anchor-link-active>.ant-anchor-link-title{
color:#303133
}

パブリック コンポーネント「Drug Handlings」の CSS コード ブロックは、左のナビゲーション バーがマウス クリックで選択されたときのタイトルの表示スタイルを設定するために使用されます。ネスト後のコードを埋め込む:

/deep/ .ant-anchor-link-active{
 .ant-anchor-link-title{
   color:#303133
 }
}

ネスト後のコードは、セレクターの行全体ではなく、js のような構造に近くなります。コード間のさまざまな関係を観察するのにさらに役立ちます。

さらに、scss は属性のネストと擬似要素のネストを実装することもできるため、より合理化されたコードを実現できます。

---

Mixin

プログラミングにおいてJavaScript などの言語では、再利用する必要があるコード ブロックを関数に記述し、必要に応じてこの式を呼び出して、コードを一度記述して複数回再利用する機能を完了することができます。 scssのMixinでも同様の機能が実装されています。ただし、mixin のコード ブロックは値を生成しません。

Mixin コード ブロックを定義するには、

@mixin

を使用する必要があります。定義された Mixin コード ブロックを呼び出すには、@include を使用します。コンポーネントのコードの説明

/deep/ .borderLayout > p > .layoutCon {
   overflow: hidden;
   &:hover{ // 此处即为伪元素嵌套
       overflow: auto;
   }
}
.m-nav-bar{
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
   overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

コンポーネントには 2 つのセレクターがあり、どちらも同じ CSS コード ブロックを持っています。その機能は、ページ上のスクロール バーを非表示にすることです。マウスを対応する領域に移動すると、スクロール バーが表示されます。

スクロール バーを非表示にするコードは、mixin を使用して別途定義して呼び出すことができます。

@mixin hide-scroll{
 overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

/deep/ .borderLayout > p > .layoutCon {
  @include hide-scroll;
}

.m-nav-bar{
		@include hide-scroll;
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
}

---

継承

継承は、コード量を削減するためにプログラミング言語でも重要な機能です。scss でも同様に重要です。 。継承は、あるスタイルが別のスタイルとほとんど同じで、わずかな違いがある場合に便利です。

コードを継承する必要がある場合は、

@extend

を使用できます。extend の後のセレクターが継承されたコードです。 (継承とmixinで実装される機能は似ているようですが、

@mixin

のコードを直接継承した場合、実装される機能は同じになるのでしょうか？) (学習ビデオ共有:

css ビデオ チュートリアル

)

以上が収集する価値のある CSS プリプロセッサ scss の使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。