Ruby on Rails で Stylus をつかう。あと、nib も。

2014/06/23 00:23:26

Stylus は簡潔な記法で CSS をナニできるアレです。HTML コーディングが主だった前職でもウィンド～ズ + Sublime Text で使ってました。いまも使ってますが。
http://learnboost.github.io/stylus/

最近の Rails では stylus_rails じゃなくて stylus を使います。

gem 'stylus'

忘れちゃいけないのが node と Stylus のインストールです。

npm install -g stylus
npm install -g nib

Stylus のインストール忘れててなんで動かないんだろうとか首をひねりまくっていた。あと nib 使うなら nib。

initializers に適当なファイルをつくって Stylus の設定を書く。

require 'stylus'
Stylus.compress = true


#プラグインのたぐいを指定する
Stylus.use '/usr/local/node-1.0/lib/node_modules/nib/lib/nib.js'

Stylus のファイル名は「application.css.styl」などとする。
プラグインのたぐいは initializers で指定した上で、.styl 上でもインポートする。

@import 'nib'
global-reset()

body
    background #eee
    font-size 18px

幸せな感じになりました。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}a img{border:none}body{background:#eee;font-size:18px}