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

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

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 に渡した値をプロパティに適応させていきます.