
Sassのお役立ちテクニック mixin基礎編
この記事は約4分で読めます。

CSS
Sassの特徴や、Sassの導入方法など前回までのブログで説明してきました。
今回はちょっと詳しく、Sassの実践的で便利なテクニックについて書いていきたいと思います。
ウェブ制作に便利なmixinとは?
Sassの特徴ブログでも軽く触れていますが、Sassにはmixinという便利な機能があります。
何度も使うようなスタイルを @mixin で定義 → @include で呼び出す
というのが基本的な方法です。
@includeをすることがない限り、Sassで書いた@mixinの記述はCSSファイルには表れませんのでCSSが煩雑にならずに済みます。
mixin実践:基礎編
まずは「_mixin.scss」ファイルを新規作成。
(アンダーバーを入れることで個別でCSSファイルに変換しなくてもいいというSassファイルになります。)
/* SCSS*/ @mixin radius{ border-radius:5px; -webkit--webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; box-sizing:border-box; }_mixin.scssにこのように記述します。
サイトによっては頻繁に登場する角丸です。この場合は5pxと指定してあります。呼び出したいSCSSファイルにはまず最初に
@import "mixin";と記述しファイルを読み込みます。
パスは相対パスなので、違うフォルダにある場合は”../../mixin”;といった風に。そして適応させたいクラスにincludeしてあげます。
/* SCSS*/ .demo{ @include radius; }このファイルをCSSに変換(コンパイル)させると、以下の様になります。
/* CSS*/ .demo{ border-radius:5px; -webkit--webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; box-sizing:border-box; }
mixin実践:ちょっと応用
ちょっと応用編です。
角丸はよく使うけど角丸のpxが様々なデザインだよって時に、ぜひmixinを使って下さい。
mixinは引数を使う事ができます。
この「5px」という部分をincludeする度に変えてみましょう。
/*SCSS*/ @mixin radius($px){ border-radius:$px; -webkit--webkit-border-radius:$px; -moz-border-radius:$px; -ms-border-radius:$px; box-sizing:border-box; }先ほどのmixinファイルの5pxの部分を「$px」に変えました。
/* SCSS*/ .demo{ @include radius(10px); }/* CSS*/ .demo{ border-radius:10px; -webkit--webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; box-sizing:border-box; }こうすることで、任意の数字の角丸スタイルを簡単に作ることができます。
ぜひお試しください♪
