Sass/mixinとはなんぞや

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

こんな感じ

コメントを残す