読者です 読者をやめる 読者になる 読者になる

delalunaofficedaysのブログ

WORDPRESSとEC CUBEくらいしか触っていないWEBデザイナーの日記とかメモ。

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

[code] @mixin default-box-size { width: 350px; height: 400px; } [/code]

使う

style.css

[code] div { @include default-box-size; background-color: #000; } [/code]

コンパイルすると・・・ [code] / line 5, ../sass/style.scss / div { width: 350px; height: 400px; background-color: #000; }

[/code]

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

変数も使える

[code] $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 ); } [/code]

こんな感じ