Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

Sass @mixin と @include

Sass ミックスイン

の@mixinディレクティブを使用すると、Web サイト全体で再利用される CSS コードを作成できます。

の@includeディレクティブは、ミックスインを使用 (インクルード) できるようにするために作成されます。

ミックスインの定義

ミックスインは次のように定義されます。@mixin指令。

Sass @mixin 構文:

@mixin name {
  property: value;
  property: value;
  ...
}

次の例では、「重要なテキスト」という名前のミックスインを作成します。

SCSS 構文:

@mixin important-text {   color: red;   font-size: 25px;   font-weight: bold;   border: 1px solid blue; }

ヒント：Sass のハイフンとアンダースコアに関するヒント: ハイフンとアンダースコアは同じであると見なされます。これは、@mixin important-text { } と @mixin important_text { } が同じミックスインと見なされることを意味します。

ミックスインの使用

の@includeディレクティブはミックスインを含めるために使用されます。

Sass @include mixin 構文:

selector {
  @include mixin-name;
}

したがって、上記で作成した重要なテキストのミックスインを含めるには、次のようにします。

SCSS 構文:

.danger {   @include important-text;   background-color: green; }

Sass トランスパイラーは上記を通常の CSS に変換します。

CSS 出力:

.danger {   color: red;   font-size: 25px;   font-weight: bold;   border: 1px solid blue;   background-color: green; }

実行例 »

ミックスインには他のミックスインを含めることもできます。

SCSS 構文:

@mixin special-text { @include important-text; @include link;   @include special-border; }

変数を Mixin に渡す

ミックスインは引数を受け入れます。このようにして、変数をミックスインに渡すことができます。

引数を使用してミックスインを定義する方法は次のとおりです。

SCSS 構文:

/* Define mixin with two arguments */ @mixin bordered($color, $width) {   border: $width solid $color; } .myArticle {   @include bordered(blue, 1px);  // Call mixin with two values } .myNotes {   @include bordered(red, 2px); // Call mixin with two values }

引数が変数として設定され、border プロパティの値 (色と幅) として使用されることに注意してください。

コンパイル後の CSS は次のようになります。

CSS 出力:

.myArticle {   border: 1px solid blue; } .myNotes {   border: 2px solid red; }

実行例 »

ミックスインのデフォルト値

ミックスイン変数のデフォルト値を定義することもできます。

SCSS 構文:

@mixin bordered($color: blue, $width: 1px) {   border: $width solid $color; }

次に、ミックスインを含めたときに変更される値を指定するだけで済みます。

SCSS 構文:

.myTips {   @include bordered($color: orange); }

ベンダー プレフィックスに Mixin を使用する

ミックスインのもう 1 つの有効な用途は、ベンダー プレフィックスです。

変換の例を次に示します。

SCSS 構文:

@mixin transform($property) {   -webkit-transform: $property;   -ms-transform: $property;   transform: $property; } .myBox {   @include transform(rotate(20deg)); }

コンパイル後の CSS は次のようになります。

CSS 出力:

.myBox { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg);   transform: rotate(20deg); }


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル