カテゴリー:
CSS
タグ:
 css sass

このエントリーをはてなブックマークに追加
更新日時:
2013年04月28日(日)
作成日時:
2013年01月19日(土)

前の記事 / 次の記事

基本

$background-color: #000000
.menu
  background-color: $background-color

MixIn

@mixin menu($background-color)
  .menu
    background-color: $background-color

@include menu(#000000)

変数名をクラスとして使う(インターポレーション)

@mixin menu($klass, $background-color)
  // #{}で囲う
  #{$klass}
    background-color: $background-color

@include menu(".top-menu",  #000000)
@include menu(".side-menu", #0000ff)

インターポレーションをhamlの中に書いた :sassフィルター の中で行う

:sass
  @mixin menu($klass, $background-color)
    // #{}で囲んで かつ # をエスケープする
    \#{$klass}
      background-color: $background-color
    // もしくは
    #{'#'}{$klass}
      background-color: $background-color

  @include menu(".top-menu",  #000000)
  @include menu(".side-menu", #0000ff)

# エスケープをしないとhamlの値と見なされるのでsassとしては無視される。

null

@mixin menu($klass, $background-color)
  #{$klass}
    background-color: $background-color

@include menu(".top-menu",  #000000)
// 敢えて値を渡したくない場合、値を渡さないとエラーになるが、
// nullを渡せばそのプロパティを定義していないことになる。
@include menu(".side-menu", null)

MixInにブロックを渡す

@mixin menu($klass, $background-color)
  #{$klass}
    background-color: $background-color
    // @contentでブロックを呼ぶことが出来る
    @content

@include menu(".top-menu", #000000)
  width: 940px
  margin-left: auto
  margin-right: auto
@include menu(".side-menu", #0000ff)
  width: 160px
  float: left

Extend

.font-white
  color: #ffffff
.top-menu
  background-color: #000000
  @extend .font-white
.side-menu
  background-color: #0000ff
  @extend .font-white

// css
// .font-whiteは雛形としてしか利用されていないがfont-whiteというクラスは存在する。
.font-white, .top-menu, .side-menu {
  color: #ffffff;
}

Placeholder

%font-white
  color: #ffffff
.top-menu
  background-color: #000000
  @extend %font-white
.side-menu
  background-color: #0000ff
  @extend %font-white

// css
// %font-whiteは雛形としてだけ利用されfont-whiteというクラスは存在しない。
.top-menu, .side-menu {
  color: #ffffff;
}

参考サイト

Sass(Scss) Memo: 変数
[Sass] Sass 3.2で実装された新機能がヤバい
haml中のsassフィルタでインターポレーションを行う