mixinの基本的な使い方
変換前
|
1 2 3 4 5 6 7 |
@mixin test { border: 1px solid #fff; } .test_import { @include test; } |
変換後
|
1 2 3 |
.test_import { border: 1px solid #fff; } |
命名規則
- 半角数字から始まる名前はつけられません。
スコープ
元々mixin自体がさまざまな場所で使用することを想定して作られた機能なのでスコープをローカルに限定することはそもそもあまり想定していないですが、一応そういう使い方もできると知っておく程度で良いでしょう。
- 変数と基本的には同じです。
- グローバルのmixinとローカルのmixinを用意できます。
引数を渡す機能
以下のように括弧で括ってあげることによって引数を渡すことが可能です。
|
1 2 3 4 5 6 7 |
@mixin test2($value) { border: 1px solid $value; } .test2_import { @include test2(#bbb); } |
デフォルト引数
以下のようにコロンを使うことによってデフォルト引数を設定することも可能です。
|
1 2 3 4 5 6 7 |
@mixin test3($value: #fff) { border: 1px solid $value; } .test3_import { @include test3; } |
複数の引数を渡す
なお、デフォルト引数と組み合わせれば、引数を一部省略することも可能です。(ただ、前の引数は省略できないので後ろだけ指定したい場合は「$color:#ccc」というように変数名を指定して引数指定することで対応可能になります。）
|
1 2 3 4 5 6 7 |
@mixin test4($value,$color) { border: $value solid $color; } .test4_import { @include test4(1px,#000); } |
セレクタのブロック自体を引数で渡す。
以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
@mixin test5 { @media screen and (min-width:480px) { @content; } } .test5_import { @include test5 { border: 1px solid solid; }; }け |
継承
指定したセレクタを引き継いで拡張することができる機能です。
mixinとの使い分け
mixin
単純に共通部分を外出ししたい場合に使います。
継承
例えば、buttonとinfo_buttonのように同じカテゴリの内容の共通する項目を共通化するために使います。
継承元にできるセレクタ
classセレクタ、idセレクタ、擬似セレクタなど基本的になんでもできます。ただし、孫セレクタ、隣接セレクタなどは継承元にできないので注意です。
また、mediaクエリの外のセレクタをmediaクエリの中で継承元にはできません。
実装方法
変換前
|
1 2 3 4 5 6 7 8 |
.parent { border: 1px solid #fff; } .child { @extend .parent; background-color: #000; } |
変換後
共通部分はグループとして書き出され、差分だけが別セレクタとして書き出されます。
|
1 2 3 4 5 6 7 |
.parent, .child { border: 1px solid #fff; } .child { background-color: #000; } |
親クラスを書き出したくない場合
「%」というプレースホルダーセレクターを使います。
変換前
|
1 2 3 4 5 6 7 8 9 |
%parent { border: 1px solid #fff; } .child { @extend %parent; background-color: #000; } |
変換後
|
1 2 3 4 5 6 7 |
.child { border: 1px solid #fff; } .child { background-color: #000; } |
多重継承
普通にできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
%parent { border: 1px solid #fff; } %parent2 { margin-bottom: 10px; } .child { @extend %parent; @extend %parent2; background-color: #000; } |
継承の連鎖
普通にできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
%parent { border: 1px solid #fff; } %child { @extend %parent; background-color: #000; } .grand_child { @extend %child; border-top: 10px; } |
関数
Sassにおける関数とmixinの違い
関数は値を返しますが、mixinはプロパティと値のセットを返します。
ネイティブ関数（組み込み関数）
Sassであらかじめ用意されている関数のことです。
round
四捨五入します。
|
1 2 3 |
.round { width: round(100px / 3); } |
quote
ダブルコーテーションをつけます。
|
1 2 3 |
.quote { content: quote(こんにちは); } |
変換後
|
1 2 3 |
.quote { content: "こんにちは"; } |
unquote
ダブルコーテーションを外します。
|
1 2 3 |
.unquote { content: unquote("こんにちは"); } |
abs
絶対値を出力する。
|
1 2 3 |
.abs { witdh: abs(-100px); } |
変換後
|
1 2 3 |
.abs { witdh: 100px; } |
ceil
切り上げる。
|
1 2 3 |
.ceil { witdh: ceil(100px/3); } |
変換後
|
1 2 3 |
.ceil { witdh: 34px; } |
floor
切り捨てる。
|
1 2 3 |
.floor { witdh: (100px/7); } |
変換後
|
1 2 3 |
.floor { witdh: 14.2857142857px; } |
rgba
色コードとアルファ値を渡します。CSSのRGBAの書式に変換してくれます。CSSでは16進の値を設定してくれないので便利です。
|
1 2 3 |
.rgba { color: rgba(#fff,0.3); } |
変換後
|
1 2 3 |
.rgba { color: rgba(255, 255, 255, 0.3); } |
mix
二つの色を混ぜた結果を返します。
|
1 2 3 |
.mix { color: mix(#fff,#000); } |
変換後
|
1 2 3 |
.mix { color: gray; } |
lighten
第二引数で明るくしたい割合を%で指定します。
|
1 2 3 |
.lighten { color: lighten(#000,20%); } |
変換後
|
1 2 3 |
.lighten { color: #333333; } |
darken
暗くする関数
|
1 2 3 |
.darken { color: darken(#fff,20%); } |
変換後
|
1 2 3 |
.darken { color: #cccccc; } |
length
配列の個数を取得する。
|
1 2 3 4 5 |
$array: meron,itigo,suica; .length { z-index: length($array); } |
nth
配列のN番目の要素を出力する。
|
1 2 3 4 5 |
$array: meron,itigo,suica; .nth { content: nth($array,2); } |
join
二つの配列を結合して出力する。
|
1 2 3 4 5 |
$array: meron,itigo,suica; $array2: lemon,kyuui; .join { content: join($array,$array2); } |
append
配列の末尾に要素を追加します。
|
1 2 3 4 |
$array: meron,itigo,suica; .append { content: append($array,lemon); } |
map-get
mapから必要な値を取得します。
|
1 2 3 4 5 6 7 8 |
$map: ( white: #fff, black: #000 ); .map_get { color: map-get($map,white); } |
ユーザー定義関数とは？
Sassに用意されていない関数をユーザー自身が用意することができる機能です。
実装例
|
1 2 3 4 5 6 7 |
@function sum($arg1,$arg2){ @return $arg1 + $arg2; } .add { witdh: sum(100px,200px); } |
その他機能
- 「デフォルト引数」のやり方はmixinと同じです。
- 関数の中で組み込み関数を使えます。
- 変数やループ、制御構文も使えます。
デバッグ
以下の構文で変数の値を見ることが可能です。
|
1 |
@debug $変数名; |
警告
あまり望ましくないことが発生した場合などにコマンドラインにメッセージを出力する目的などで使います。
|
1 |
@warn '警告内容'; |
エラー
エラーが発生した場合に使います。警告と異なり処理が停止します。
|
1 |
@error 'エラーメッセージ'; |
@at-root
使い方
@at-rootとつけたものを入れ子になっていたとしてもルート要素にすることができる機能です。
|
1 2 3 4 5 6 7 |
.btn { @at-root { div { color: #fff; } } } |
変換後のCSS
|
1 2 3 |
div { color: #fff; } |
使い道
正直あまりないです。ただ、「@mixin」と組み合わせると便利です。
この記事へのコメントはありません。