Sass入門ガイド

@mixin ミックスイン

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ミックスインは、繰り返し使うスタイルを定義し、呼び出すことができる機能です。ここでは、@mixinディレクティブと@includeディレクティブを使った、ミックスインの基本的な使い方について紹介します。
講師:
06:06

字幕

ミックスインは繰り返し使うスタイルを定義し呼び出すことができる機能です。このレッスンは @mixin ディレクディブと@include ディレクディブを使ったミックスインの基本的な使い方について紹介します。また @extendスタイルの継承との違いについても説明します。画面では IDEでSass ファイルと CSSフ ァイルを並べて開いているところです。画面左の Sass ファイルを直接編集するとIDE の機能を使って自動的に保存、コンパイルが実行され画面右側のCSS ファイルに反映される様に設定しています。現在 Sass ファイルでは3 つのクラスセレクタが定義されています。それぞれのクラスセレクタでは背景色文字色幅高さを定義しています。また、それぞれのクラスセレクタでは背景色と文字色こちらの値は全て共通の値が使われています。対して幅、高さについてはそれぞれのクラスで別々の値が設定されています。こんな時は @mixin ディレクディブを用いてミックスインを使うことで共通されたスタイルを1 つのミックスインにまとめることができます。尚、@extendスタイルの継承とよく似た機能ですが挙動には細かい違いがあります。 こちらについては後ほどご説明します。それではミックスインを書いていきましょう。ミックスインを書くにはアットマークから始まるmixin ディレクディブを記述します。この後にミックスインの名前を入力します。ここではボタンベースという名前にします。また名前の後は波括弧で括ります。この中に共通化するスタイルを定義します。それぞれのクラスで共通化できそうなプロパティはバックグランドカラープロパティとカラープロパティでしたのでこの 2 つのプロパティを選択し右クリックからコピーミックスインの中にペーストします。これでミックスインが完成しました。ミックスインを読み込むには@include ディレクディブを使います。読み込みたい場所で @include ディレクディブを使ってみましょう。ここではボタンビッグクラスの中で読み込んでみます。重複しているスタイルを削除してから@include ディレクディブを記述します。この @include ディレクディブの後に読み込みたいミックスインの名前を入力します。ここではボタンベースと入力し、セミコロンで閉じます。出力された CSS ファイルを見てみると先ほどと、何だ変更はありません。 同様にボタンミディアム、ボタンスモールでもインクルードを使ってみましょう。値をコピーし該当の場所にペーストしていきます。やはり出力された CSS ファイルには変化がありません。これは定義したミックスイン本体はCSS には書き出されないためその部分に定義したスタイルはそれぞれのインクルードで読み込んだ先でもう一度記述されるというミックスインの特性によるものです。それでは @extendスタイルの継承と比較してみましょう。同じ様な構成を @extendスタイルの継承を使って実装した CSS ファイルと並べて開いてみます。ミックスインとスタイルの継承それぞれの機能を使ってスタイルを共通化したファイルを開いてみました。画面左上が先ほどのミックスインを使った Sass ファイルその右隣画面右上は、この Sass ファイルをコンパイルした CSS ファイルです。画面の左下こちらはミックスインと同じ様な構成をエクステンド、スタイルの継承を使って実装した Sass ファイルその右隣は Sass をコンパイルしたCSS ファイルです。ここで違いを確認してみましょう。ミックスインでは先ほど説明した様にミックスインでまとめたスタイル自体は書き出されずそれを読み込んだ場所に書き出されています。 対してエクステンドスタイルの継承でまとめたスタイルは一旦そのスタイルが書き出されエクステンド、継承された場所のセレクタがその継承元のセレクタと並んで並記されるという書式の違いがあります。この様にミックスインを使うかエクステンドを使うかによって書き出される CSS に違いがあるということを覚えておいてください。この様に共通化したスタイルを複数の場所で使い回したい時にはエクステンドの方が出力される CSS がシンプルになりますのでより合理的と言えるでしょう。このレッスンでは繰り返し使うスタイルを定義し呼び出すことができるミックスインの基本的な使い方とスタイルの継承エクステンドとの違いについて学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。