to pagetop
:)
spec5zigen Creator's Lab.

プログラマーの後藤です。
前回の続き、開発環境周りの話でStylusのことをちょこっと

そもそもCSSのメタ言語は他にもSassやらLessやら他にもメジャーなものがありますが、
Stylusを選んだ理由はNode.jsで書き出せるためgruntから入った僕個人的にも導入がしやすく
機能も十分だと思ったからです。

ということでStylusの本家サイトはこちら

導入手順は前回の記事を参考にするかgoogle先生にお聞きすれば沢山記事が出てくるので省きます。

今回は実際にどんな風にStylusを使っているかを少し紹介してみたいと思います。
基本的な記法は、カンマやセミコロン、中括弧などを省略できて、代わりにスペースやインデントが重要になっています。

Stylusでは関数を使うことができます。
例えばWebアプリなどを作っていて、ボタンや当たり判定を配置しないといけないときに
position absoluteを使ってx,yとwidth,height等を毎回設定すると行数が大変なことになりますが
たとえば以下の要にしておくと1行で書くことができます。

//stylus
setpossize(x,y,w,h)
  position absolute
  left x px
  top y px
  width w px
  height h px

#item1
  setpossize(100,100,100,100)
  background: #f00;
#item2
  setpossize(200,200,100,100)
  background: #0f0;

↑をコンパイルすると↓のようになります。

//css
#item1 {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 100px;
  height: 100px;
  background: #f00;
}
#item2 {
  position: absolute;
  left: 200px;
  top: 200px;
  width: 100px;
  height: 100px;
  background: #0f0;
}

こうしておくことで見た目もスッキリするし
文字数が減らせるので記述も楽だし、後の修正や変更も対応が簡単です。

また、nibというライブラリを使うと便利な関数が用意されており
ベンダープレフィックスの補完やグラデーションの設定を楽に出来ます。

//stylus
@import 'nib'

#sample
  background linear-gradient(top,#E6AF6A 0%,#FFC376 5%,#FFC376 100%)
//css
#sample
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e6af6a), color-stop(0.5, #ffc376), color-stop(1, #ffc376));
  background: -webkit-linear-gradient(top, #e6af6a 0%, #ffc376 50%, #ffc376 100%);
  background: -moz-linear-gradient(top, #e6af6a 0%, #ffc376 50%, #ffc376 100%);
  background: -o-linear-gradient(top, #e6af6a 0%, #ffc376 50%, #ffc376 100%);
  background: -ms-linear-gradient(top, #e6af6a 0%, #ffc376 50%, #ffc376 100%);
  background: linear-gradient(top, #e6af6a 0%, #ffc376 50%, #ffc376 100%);

いちいち-webkitとか-mozとか書くのが面倒なのでよくお世話になっています。

変数を使うこともできます。

//stylus
w = 150px
h = 80px
color1 = #A7A7A7
color2 = #3333A7

#sample
  position absolute
  left 50%
  top 50%
  width: w
  height: h
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  color color1
  &:hover
    color color2
//css
#sample {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 80px;
  margin-left: -75px;
  margin-top: -40px;
  color: #a7a7a7;
}
#sample:hover {
  color: #3333a7;
}

マージンやカラー変更の修正を置換で行うのもいいですが、マージンやカラーセットを変数にしておいて
一番上に書いておくとかすれば対応が簡単ですよね。

また、上記のように&:hoverと記述すると自動で:hoverを記述してくれます。
さらに、セレクタごとインデントしていくことでセレクタ内セレクタを明示的に記述していくこともできます。
@width,@heightはそのセレクタ内(#sample)のwidthとheightに置き換わります。

他にもfor文やif文なんかを使って以下の様なこともできます。

//stylus
table
  for row in 1 .. 3
    td:nth-child({row})
      height: 10px * row
      if row == 3
        border none
//css
table td:nth-child(1) {
  height: 10px;
}
table td:nth-child(2) {
  height: 20px;
}
table td:nth-child(3) {
  height: 30px;
  border: none;
}

とまぁこんなかんじで基本的な部分だけでも使いこなせるようになると、かなりcssのコーディングが楽になると思います。

注意点を1点あげるとすれば、複数人でコードをいじる際などstylusでで書きだしたcssに対し別の人が修正を加え
後日また自分が対応するようなことがあった場合、stylusで書いたものと最新のcssが一致せず
先祖返りなどの温床になりかねないので、最初にルールを統一しておいたほうが良いですね。
納品後の対応は諦めてcssを直接変更するなどしたほうがいいかもしれません。

今回はこの辺で、それでは良いコーディングライフを!