CSS / CSS3 and LESS で作る iPhone ボタン – Step 01 要素をボタンスタイル化する mixins を定義しよう

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 01.

前回は, ベースとなるマークアップとスタイルを書きました. このStepでは ボタンスタイルを簡単に適応できるように mixins を定義します. ここではまだ mixins は空なので見た目は変わりません.

screenshot

table of contents

サンプル & コード

サンプルです.

CSS(LESS) コード

// #! less 

/*
 * library
 */
#tm {
  
  
  /*
   * #tm .button
   * @param   {color} @color    テキストの色
   * @param   {color} @bg-color 背景色
   * @param   {size}  @width    幅
   * @param   {size}  @height   高さ
   */
  .button(@color, @bg-color, @width, @height) {
    
  }
  
}

/*
 * main
 */

body {
  font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
}

h1 {
  font-size: 16px;
}

div[class|=button] {
  //float: left;
  margin: 10px;
}

@button-width: 128px;
@button-height: 32px;

.button-red {
  #tm .button(white, hsl(0, 80%, 50%), @button-width, @button-height);
}

.button-yellow {
  #tm .button(black, hsl(60, 80%, 50%), @button-width, @button-height);
}

.button-green {
  #tm .button(white, hsl(120, 80%, 50%), @button-width, @button-height);
}

.button-cyan {
  #tm .button(white, hsl(180, 80%, 50%), @button-width, @button-height);
}

.button-blue {
  #tm .button(white, hsl(240, 80%, 50%), @button-width, @button-height);
}

.button-purple {
  #tm .button(white, hsl(300, 80%, 50%), @button-width, @button-height);
}

.button-white {
  #tm .button(black, white, @button-width, @button-height);
}

.button-black {
  #tm .button(white, black, @button-width, @button-height);
}

up

解説

LESS の mixins 機能を使おう

LESS の mixins 機能を使うことで, スタイルをまとめておいて,使いまわすことができます. また, 引数を指定できるのでプログラミングでいう関数のように使うことができます.

今回のサンプルでは, .button という mixins を定義しています.

  .button(@color, @bg-color, @width, @height) {
    
  }

対応する引数は下記の通り

引数 説明
@color テキストカラー
@bg-color 背景色
@width
@height 高さ

今回はまだ .button の中に何も記述していないので見た目は何も変わりません. 次の step 以降でこれらの引数をプロパティに適応させていきます.

また, mixins は下記のように書くことで簡単に適応させることができます.

@button-width: 128px;
@button-height: 32px;

.button-red {
  #tm .button(white, hsl(0, 80%, 50%), @button-width, @button-height);
}

.button-yellow {
  #tm .button(black, hsl(60, 80%, 50%), @button-width, @button-height);
}

.button-green {
  #tm .button(white, hsl(120, 80%, 50%), @button-width, @button-height);
}

.
.
.

幅, 高さは変数化しているので全てのボタンのサイズをさくっと変えることができます. 注意点として名前衝突しないように .button mixins は #tm 内に入れているので 使用する際は .button の前に #tm を書くことを忘れないようにしましょう.

up

次回は, mixins に渡した値をプロパティに適応させていきます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT