Sass/mixinとはなんぞや

2016年5月10日

mixinに入門してみる

まずはここ
http://www.developerdrive.com/2014/11/15-essential-sass-mixins/

こういうものだそうです。
なんだかとてもややこしい。

CSSを書くだけなのにこんな難しいことをしなければならないのか？という疑問は置いといてちょっと学習してみる。
まずは使える機能を見ていく。

• box-sizing（ボックスサイズ）
• opacity（不透明度）
• column-width（カラム幅）
• circle（円形）
• font-size（フォントサイズ）
• box-shadow（ボックスシャドウ）
• xPos（要素の座標）
• vertical-align（天地の中央に配置）
• flexbox（フレックスボックス）
• flex（モダンブラウザの旧仕様にも対応したflexの指定）
• flex-order（表示の順番）
• flex-direction（表示の方向）
• gradient（グラデーション）
• ghost-button（ゴーストボタン）
• break-point（ブレイクポイント）

早速わからないお・・・・。
これは何に使えるものなんだろうか。

実際に使ってみる。
例えば・・・

定義する

style.css

@mixin default-box-size {
    width: 350px;
    height: 400px;
}

使う

style.css

div {
    @include default-box-size;
    background-color: #000;
}

コンパイルすると・・・

/* line 5, ../sass/style.scss */
div {
  width: 350px;
  height: 400px;
  background-color: #000; }

こんな感じになってくれる。
素晴らしい。

変数も使える

$PREFIX_TYPES:  -webkit-, -moz-, -ms-, -o-, '';
@mixin main-border-radius( $num ) {
  @each $prefix in $PREFIX_TYPES {
      #{$prefix}border-radius: $num;
  }
}
.box {
  @include main-border-radius( 5px );
}

こんな感じ