はじめに
この記事は株式会社アイスタイルアドベントカレンダーの12日目の記事です。
入社３ヶ月目、社会人２年目の@nakahararuuがお送りします。
弊社のアドベントカレンダーも中盤に差し掛かりました。
ここまで皆さんが非常にレベルの高い記事を書いてくれていますので、そろそろ駆け出しエンジニアに易しい記事があっても良いはずです。
そう、例えばTwitter Bootstrapとか！
今回はTwitter BootstrapのTipsのひとつとして、Mixinの利用について書こうと思います。
Mixinの概要
CSSフレームワークであるBootstrapはCSSプリプロセッサであるLessを用いて開発されています。
BootstrapはCSSの他Less・Sass版のソースを提供しており、これらをプロジェクトに組み込んで利用することが可能です。
これによって得られるメリットの一つに、Bootstrap内で定義されているLess・SassのMixinを使用できるようになる点が挙げられます。
グリッドシステムなど、使い慣れたBootstrapのコンポーネントをBootstrap独自のclass名に縛られることなく利用できるため大変便利です。
Mixin定義をImportする
※ 以下、Sass版の解説を行いますがLess版も基本同様かと思われます。
まずはプロジェクトにSass版のBootstrapを導入します。
例としてBowerを利用する場合は、プロジェクトのルートディレクトリでbower install --save bootstrap-sassとしてインストールしましょう。
インストール後、以下のようにbootstrap.scssをimportして準備完了です。(パスは環境に応じて読み替えてください)
@import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
ここで読み込むbootstrap.sassがMixinや定数が定義されたファイルをまとめて@importしてくれるのですが、全てのファイルを読み込む必要が無いのであれば内容を編集して取捨選択することもできます。
オススメMixin
グリッドシステム
まずはお馴染みのグリッドシステムです。
少々極端ですがレスポンシブデザインを意識してグリッドシステムを使うとclass属性が冗長になってしまうことがあります。
<div class="row">
<div class="col-lg-8 col-md-10 col-sm-10 col-xs-12">column 1</div>
<div class="col-lg-8 col-md-10 col-sm-10 col-xs-12">column 2</div>
<div>
Mixinを活用すると以下の通り、全てHTMLから追い出すことができました。
<section>
<article>content 1</article>
<article>content 2</article>
</section>
section {
@include make-row();
article {
@include make-lg-column(8);
@include make-md-column(10);
@include make-sm-column(10);
@include make-xs-column(12);
}
}
グラデーション
開始部分の色、終了部分の色、グラデーション開始位置（％）、グラデーション終了位置（％）の順で指定します。
.example {
@include gradient-horizontal(#1834cc, #1dc937, 0%, 100%);
}
Clearfix
サポートclassを集めたライブラリでよく見られますが実装上の都合に起因するclass名ですので、できればマークアップ中に含めたくありません。
.element {
@include clearfix();
}
センタリング
.element {
@include center-block();
}
終わりに
書いているうちに全然知識が足りないことに気付いてしまい尻すぼみになってしまった感が否めませんが…
Mixinを活用することでスタイリングとマークアップの両方から冗長な記述を減らし、すっきりとしたコードを保つことができます。
Mixinに関する日本語の情報は案外少ないと思いますのでこの機会に使えるMixinをチェックしてみてはいかがでしょうか。全てではないようですがBootstrapのドキュメントでも言及されています。
明日は１３日目、@trtrakiさんの「マネージャーで困ったこと(前編)」です！