SASS コンポーネントの開発_html/css_WEB-ITnose

SASS コンポーネント開発

SASS プリプロセッサは、CSS にはないプログラミング機能を追加し、フロントエンド開発の効率を向上させ、CSS 作成スキルを拡張します。

コンポーネント開発

フォーム プロンプト レイヤー (成功、警告、エラー、その他のステータス エラーを含む) コンポーネントを設計するには、CSS で基本スタイルのフォント (font-)、外側と内側のマージン (パディング、マージン) を定義する必要があります。表示モード (表示)、境界線、およびその他の関連コンテンツを選択し、個々の状態に必要なスタイルを定義します。

CSS コンポーネントの開発

最初に基本スタイルを定義し、次に各州のスタイルのセットを定義します

.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 はこの懸念を解決し、作業効率を向上させるプログラミング機能を提供します。

Sass コンポーネント開発

コンポーネントはデータとメソッドを単純にカプセル化したものです。

変数のデフォルト値!default

まずjsの変数宣言コードを見てください

うわー

もう一度sassコードを見てください、とてもシンプルですね?

var a = 1;console.log(a);//1

Declaration!default、ここでは青で出力されます。これは非常に興味深いです。その機能について簡単に説明します。変数宣言に !default が含まれていると仮定すると、この変数にはデフォルト値があり、グローバルな通常の宣言によってオーバーライドできることを意味します。これはその大きな役割を反映していません。

@mixin アプリケーション

最初に @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);}

質問?

コンポーネントは反復可能で呼び出し可能であり、データとメソッドの単純なカプセル化でもあります

デフォルトのパディングの15pxに満足できず、それを5pxに変更したい場合の方法

再オーバーライド

再上書きすると同じコードが生成されます。これは必要なコンポーネントではありません

//导入_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;}

変数設計原則

すべての変数にはデフォルト値があり、その後に簡単にカバーできるように !default が続きます

一部の変数はスイッチ変数です。 true または false。互換性と制御コードに適用されるスタイルを出力するかどうかを示すために使用できます。

一部の変数は複合変数であり、変数の数を減らすために 1 つの変数に複数の値が含まれます。

リファレンスドキュメント

sassCore http://www.w3cplus.com/sasscore/index.html

sass によって明らかにされる変数 http://www.w3cplus.com/preprocessor/sass-basic-variable.html