記事ディレクトリ
1.不滅のように見えますが、実際には降格されます
シンプルなHTML言語、html + cssは、美しい静的Webページを表示できます。また、いくつかの属性と属性値を記述するだけで、非常に簡単に使用できます。
ただし、プロジェクトの複雑さが増し、コードのサイズが大きくなるにつれて、単純なcssには多くの欠陥があります。
- モジュール化できない、モジュール化
できない、など、多くの問題が発生します。たとえば、（1）名前の依存関係、同じ名前を避けるためにあらゆる手段を試してください。（2）コードの量が多くて乱雑であり、モジュールで適切に開発、保守、およびテストできません。（ 3）再利用できないモジュール化しない最大の問題は、プロジェクト開発時に再利用できないことです。開発プログラムはシンプルでシンプルです。 - 変数なし。
関数は言うまでもなく、いわゆるプログラミング言語には、少なくとも変数があります。変数のない最大の問題は、ミスUIがプロジェクトテーマをGGに変更する必要があると言ったときに、1つずつ変更する必要があるということです。 - 入れ子の問題など
ここでは、cssの@importについて説明する必要があります。CSSの@importルールでは、cssファイルに他のcssファイルをインポートできますが、このメソッドは、実行時にインポートされたcssファイルをロードするようにブラウザをトリガーし、ページをロードします。それは非常に遅いです、それは頭の中の直接の引用ほど速くはありません。
2. sass機能1：ネストされた書き込み
ネイティブcssの書き込みは、作成が面倒で複雑であるだけでなく、再利用できないだけでなく、かなり肥大化しているように見えます。
.container .leftItem {
color: dimgray;
}
.container .leftItem .resource {
color: firebrick;
}
.container .leftItem .resource .name {
color: deepskyblue;
}
sassネストされた書き込み方法、明確な構造、ネストされたレイヤー、冗長で繰り返されるセレクターコーディングの多くを削減
.container {
.leftItem {
color: dimgray;
.resource {
color: firebrick;
.name {
color: deepskyblue;
}
}
}
}
3. sass機能2：変数「out」
基本的に言語と呼ばれる変数はすべて必須ですが、css、いいえ、CSSが偽の言語である可能性があることをもう一度証明します。サスはこの欠点を補った。
変数（ページの本体の色）の前にコードはありません。プロジェクト全体にこの色が設定された1000の場所があるとすると、UIの女性が色を変更し、プロジェクト全体を置き換えるように言ったらどうしますか？交換エラーはどうですか？？以下はcssの書き方です
.container .leftItem {
color: #8833ee;
}
.resource {
color: #8833ee;
}
.name {
color: #8833ee;
}
#glass {
color: #8833ee;
}
sassに変数を追加した後、それはより簡単で、より速く、より便利ですか？！
$theme: #8833ee
.container {
.leftItem {
color: $theme;
}
}
.resource {
color: $theme;
}
.name {
color: $theme;
}
#glass {
color: $theme;
}
変数を使用した後
- 複数の人が共同作業する場合は、頻繁に使用する属性値を変数として定義し、それらを別の構成に配置して注釈を付ければ、直接参照できます。
- コードの保守性を大幅に強化し、ローカルスタイルとグローバルスタイルの統一された制御を容易にします。
4. sass機能3：ファイルのモジュール化
モジュラー開発は、大規模で複雑なプロジェクトをより小さなモジュールに分解し、検証、デバッグ、およびテストを容易にすることです。
Sassは、cssの@importを拡張して、真に強力なモジュールシステムを実現しました。
モジュール化の前
<!-- index.html -->
<link rel="stylesheet" href="/your/site/common.css">
<link rel="stylesheet" href="/your/site/popup.css">
<link rel="stylesheet" href="/your/site/module_a.css">
<link rel="stylesheet" href="/your/site/site.css">
モジュール化後、
最初にsite.scssに他の3つのscssファイルを導入します
/* site.scss */
@import "common";
@import "popup";
@import "module_a";
次に、メインファイルにsite.scssファイルをインポートするだけです。
5. sass機能4：「混合命令」の多重化
mixin命令は、JavaScriptの関数と非常によく似ています。つまり、この命令にはいくつかのスタイルが含まれています。この命令が呼び出されると、スタイルが返され、再利用されたスタイルがパックされます。
たとえば、次の段落にパターンが繰り返されるコードがあります。
.description{
color: red;
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.article{
color: #444;
border: 1px solid #e3e3e3;
border-radius: 2px;
}
わずかな最適化：
.description, .article{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.description{
color: red;
}
.article{
color: #444;
}
良さそうですが、後で似たようなスタイルを追加すると、
.description, .article, .style01, .style02{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.
.
.
.style01{
}
.style02{
}
毎回2か所を変更するのは面倒で、特に共通のスタイルが分かれていると見落としがちで、間違いを犯しやすくなります。
再度最適化を行います。
.grey-border-radius{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.description{
color: red;
}
.article{
color: #444;
}
少し良いように見えますが、この場合、htmlで使用される各タグは.grey-border-radiusクラスを追加する必要があります。明らかにこれは冗長です。このアプローチは「影響」があると言えます。
Sass再利用を使用した後：
@mixin grey-border-radius{
border: 1px solid #e3e3e3;
border-radius: 2px;
}
.description{
@include grey-border-radius;
color: red;
}
.article{
@include grey-border-radius;
color: #444;
}
コンパイルされたcss出力：
.description {
border: 1px solid #e3e3e3;
border-radius: 2px;
color: red;
}
.article {
border: 1px solid #e3e3e3;
border-radius: 2px;
color: #444;
}
そうすることは、実際にはパブリックスタイルをカプセル化することと同等であり、使用するときに呼び出すだけです。
SASSには実際には多くの機能がありますが、最も一般的に使用されるのはこれら4つの特性です。実際、一般的なエンジニアリングではこれら4つの特性を習得するだけで十分です。複雑な機能と比較すると、通常、CSSには実装されていません。これが黄金の平均です。
興味のある方はクリックして他の機能を見ることができます