ホームページ > 記事 > ウェブフロントエンド > SASS コンポーネントの開発_html/css_WEB-ITnose
SASS プリプロセッサは、CSS にはないプログラミング機能を追加し、フロントエンド開発の効率を向上させ、CSS 作成スキルを拡張します。
フォーム プロンプト レイヤー (成功、警告、エラー、その他のステータス エラーを含む) コンポーネントを設計するには、CSS で基本スタイルのフォント (font-)、外側と内側のマージン (パディング、マージン) を定義する必要があります。表示モード (表示)、境界線、およびその他の関連コンテンツを選択し、個々の状態に必要なスタイルを定義します。
最初に基本スタイルを定義し、次に各州のスタイルのセットを定義します
.tips { /* 基本颜色设置 */ padding: 15px; margin-bottom: 20px; border-radius: 4px;}//成功状态.tips-success{ background-color: #47a447; color: #fff;}//警告状态.tips-warning{ background-color: #ed9c28; color: #fff;}//错误状态.tips-error{ background-color: #ed9c28; color: #fff;}
各州のテキストと境界線の色を個別に設定する必要があり、少し面倒です。情報情報、危険な危険など、その後の他の状態の拡張により、作業コストが増加します。幸いなことに、SASS はこの懸念を解決し、作業効率を向上させるプログラミング機能を提供します。
コンポーネントはデータとメソッドを単純にカプセル化したものです。
まずjsの変数宣言コードを見てください
うわーもう一度sassコードを見てください、とてもシンプルですね?
var a = 1;console.log(a);//1
Declaration!default、ここでは青で出力されます。これは非常に興味深いです。その機能について簡単に説明します。変数宣言に !default が含まれていると仮定すると、この変数にはデフォルト値があり、グローバルな通常の宣言によってオーバーライドできることを意味します。これはその大きな役割を反映していません。
@mixin アプリケーション必要に応じて @include を使用して、ミックスインへの呼び出しを宣言します。
$color:blue;$color:red; !default;//变量申明带有!default,表示当前值为缺省值p{ color:$color;//输出blue}
汎用モジュールを呼び出すと、現在のコンポーネントを複数のコンポーネント スタイルに拡張できます。
/* mixin */@mixin tips($background,$text-color,$tipsStylePadding) { background-color: $background; color: $text-color; padding: $tipsStylePadding; margin-bottom: 20px; border-radius: 4px;}
@include は必要に応じて任意に呼び出すことができますが、十分に標準化されておらず、後で保守するのが困難です。
コンポーネント インスタンス次に、新しい scss ファイルを作成します。ここでは、それを _tips.scss と呼びます。
//成功状态.tips-success { @include tips($background,$text-color,$tipsStylePadding);}//警告状态.tips-warning { @include tips($background,$text-color,$tipsStylePadding);}//错误状态.tips-error { @include tips($background,$text-color,$tipsStylePadding);}//信息状态(再扩展一个).tips-info { @include tips($background,$text-color);,$tipsStylePadding}
次に、必要なファイルでこのファイルを呼び出す必要があります。これにより、このコンポーネントが開発されます
/* 变量---------------------------------*/$background: #47a447 !default;$text-color: #fff !default;$tipsStylePadding: 15px !default;/* mixin---------------------------------*/@mixin tips($background,$text-color,$tipsStylePadding) { background-color: $background; color: $text-color; padding: $tipsStylePadding; margin-bottom: 20px; border-radius: 4px;}/*样式---------------------------------*///成功状态.tips-success { @include tips($background,$text-color,$tipsStylePadding);}//警告状态.tips-warning { @include tips($background,$text-color,$tipsStylePadding);}//错误状态.tips-error { @include tips($background,$text-color,$tipsStylePadding);}//信息状态(再扩展一个).tips-info { @include tips($background,$text-color,$tipsStylePadding);}
再上書きすると同じコードが生成されます。これは必要なコンポーネントではありません
//导入_tpis.scss@import '_tips';
@include のパラメータを変更すると同じコードが生成されますが、これは必要なコンポーネントではありません
//导入_tips.scss@import '_tips';.tips-success{ padding:5px;}/*编译后样式---------------------------------*/.tips-success{ background-color: #47a447; color: #fff; padding: 15px; margin-bottom: 20px; border-radius: 4px;}.tips-success{ padding: 5px;}
ここで使用する必要があります !default; 機能
//导入_tips.scss@import '_tips';.tips-success{ @include tips($tipsStyleBorder,5px);}/*编译后样式---------------------------------*/.tips-success{ background-color: #47a447; color: #fff; padding: 15px; margin-bottom: 20px; border-radius: 4px;}.tips-success{ background-color: #47a447; color: #fff; padding: 5px; margin-bottom: 20px; border-radius: 4px;}