コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

ハムルマン スタイラス

Stylus Haml
ハムルマンのうた

～ 前奏 ～
はじめて知ったひとの愛 そのやさしさに目覚めた男
ハムルチョップは 末尾1文字を除く
ハムルキックは わからん
ハムルアイなら わからん
ハムルカッターは 全然わからん

あ～～～～ Haml好き

正義のヒーロー
ハムルマン ハムルマーンッ

Stylus公式
Expressive, dynamic, robust CSS — expressive, robust, feature-rich CSS preprocessor



前回記事
inujini.hatenablog.com



前回に引き続き調子に乗って続編を作ってしまった

はじめてしまった理由は前回記事に同じ、Stylus触りたかっただけ。Rubyと話を絡ませるとなると本来はそういうのと相性のいいSCSSでタイトルを付けるのがおさまりがいいんですが、ハムルマンサスよりもハムルマンスタイラスとつけた方が響きがよかったのでそっちを採用した。んで件のStylusが何者なのかといえばCSSメタ言語です。CSSをより良い感じに使えるように拡張したやつです。ピュアなCSSって、どう作っても汚染していくのでちゃんとしたもの作りたい場合はこの手のメタ言語なるはやで覚えないと辛くなるイメージある。


ちなみに余談ですけど「SCSS」の読み方以下サイトによると「セックス」だそうです。いいですか？読み方はセックスだそうです。
scss の読み方｜YOMIKATA



そんじゃあ、Stylusやっていきましょうか。基本的な記述は以下のような感じになります。

ul 
  margin 0
  list-style-type none
  padding-left 0
li
  display inline-block
  padding 4px 8px
  font-size 12px
  > a
    text-decoration none
    color inherit
    &:hover
      color royalblue

/*
コンパイル後
ul {
  margin: 0;
  list-style-type: none;
  padding-left: 0;
}
li {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
}
li > a {
  text-decoration: none;
  color: inherit;
}
li > a:hover {
  color: #4169e1;
}
*/

大まかな使い方は上の通り、コロン、セミコロン、波括弧などの記述を省略して書けます。以上です。他にもmixinとかあったりするけど使わなかった…。


・今回のHamlポイント

%header
  %nav
    %ul
      - navItems.length.times do |i|
        %li{:class => ('current' if i==0)}
          %a{:href => "#{navItems[i][:href]}"}
            #{navItems[i][:text]}

ハムルマンをタイトルにしてしまったのでHamlでのポイントを無理やりねじ込んでみる。if文的要素をねじ込むには以下のような感じでねじ込むことができるとのことです。


あとがき

自分用のStylusメモが欲しかっただけで作った。続けざまにネタにするつもりはなかった。むしゃくしゃしてやった。反省はしている。

[トップへ]