おおたおおた
2017/07/19

Sassのお役立ちテクニック mixin基礎編

この記事は約4分で読めます。

Sassのお役立ちテクニック mixin基礎編

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

こうすることで、任意の数字の角丸スタイルを簡単に作ることができます。
ぜひお試しください♪

Sassのお役立ちテクニック mixin基礎編
おおた イラストレーター / フロントエンジニア

リトルトゥースです。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。