SASS コンポーネントの開発_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:23:28

オリジナル

1118 人が閲覧しました

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;}

ログイン後にコピー