あけましておめでとうございます。 今年の抱負とか特に考えてないので、お汁粉でも食べながら考えたいと思います。 2011年最初の記事は、著作権表示についてです。

© 著作権者の名前 最初の発行年 All rights reserved.

僕のアイコンは@citrocubeこと輝竜さんに描いていただいてるんですが、その輝竜さんから12月24日に謎のURLが送られてきました。

開いてみたら、なんと驚きのクリスマスVer.アイコンでした！ 突然のサプライズ！

しかも、頭装備部分のレイヤーを切り替えると、年末年始以降にまで対応しているというサービス満点ぶり！

実は、更にもう一つのVer.があるのですが、これは年が明けてから使おうと思っています。
本当に突然のサプライズだったので、嬉しすぎて耳が生えるかと思いました！ ありがとうございました！

何やら、MBAを買ったら導入したツールや設定を晒すのが流行ってるらしいので、僕もやってみます。 よもつんとか外村さんとかも記事書いてくれないかなーかなー。

ここ最近Sugamo界隈で購入者が相次いでいて、いいなーと思っていたら気づいたら自分でも買ってました！

上から。

横から。 うすぅぃー！

Appleのロゴ。 電源が入ると光る。

いやーほんと薄い。

開いたところ。

スタイリッシュ！

キーボード。 個人的にはストロークが深い物が好みなのだけど、これはかなり打ちやすい。

電源いれた。

ロゴもかっこいい。
次の記事では、やった設定や入れたツールを書きます。

使いまわしそうなSassのコードをメモっておいたら、（自分が）便利かなあとか思ったので載せておくテスト。

// ===============================
//   Variables
// ===============================
$red: #f00;
$blue: blue;

// ===============================
//     Mixins (Include)
// ===============================
@mixin link {
  color: #00f;
}
@mixin link_h {
  color: #fff;
  background: #00f;
}
@mixin link_v {
  color: #600;
}

@mixin min-height($px) {
  min-height: $px;
  height: auto!important;
  height: $px;
}

@mixin inline-block {
  display: inline-block;
  #display: inline;
  #zoom: 1;
}

@mixin position_Pattern($min, $padding, $top, $left, $width, $margin) {
  li {
    position: relative;
    @include min-height($min);
    padding: $padding;
    
    img {
      position: absolute;
      top: $top;
      left: $left;
      width: $width;
    }
    p {
      margin: $margin;
    }
  }
}

@mixin radius($px) {
  -moz-border-radius: $px;
  -webkit-border-radius: $px;
  -border-radius: $px;
}

@mixin gradient($color1, $position1, $color2, $position2, $color3, $position3) {
  background: -moz-linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
  background: -webkit-gradient(linear, left top, left bottom, color-stop($position1, $color1), color-stop($position2, $color2), color-stop($position3, $color3));
  background: linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
  background-color: #777;
}

/* ===============================
   Selector Inheritance (extend)
=============================== */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  #zoom: 1;
}

/* ===============================
   Test
=============================== */
a {
  @include link;
}
a:visited {
  @include link_v;
}
a:hover {
  @include link_h;
}

div {
  @include inline-block;
  @include min-height(100px);
  @include radius(10px);
  @extend .clearfix;
  @include gradient(#777, 0%, #555, 50%, #222, 100%);
}

@include position_Pattern(40px, 10px, 10px, 10px, 60px, 0 0 0 70px);

/* ===============================
   Nesting
=============================== */
html {
  background: $red;
  body {
    background: $blue;
  }
}

gradient とか、逆に面倒になってる気がしないでもない。 radius・clearfix・min-heightとかは便利そう。