Tenarai_CSS - Tenarai Wiki - Tenarai

Tenarai::CSS

Ruby のブロックを使って CSS を作るクラス

概要

Tenarai::XML のように、Ruby のブロックを使って CSS を作るクラスでこんな感じです。

 require 'tenarai/css'
 
 css = Tenarai::CSS.new
 
 css.selector('#menu') do |s|
   s['width']  = '150px'
   s['margin'] = '1em 1em 1em 1em'
   s['border'] = 'solid 1px blue'
 end
 
 css.selector('div') do |s|
   s['align']  = 'left'
   s['border'] = 'solid 1px green'
 end
 
 puts css.to_s

これを実行すると、こうなります。

 #menu {
   border: solid 1px blue;
   margin: 1em 1em 1em 1em;
   width: 150px;
 }
 
 div {
   align: left;
   border: solid 1px green;
 }

Tenarai::XML と同じようにインデント文字数を指定することが出来ます。

 css = Tenarai::CSS(:indent => 0)

とするか、

 puts css.to_s(0)

とすると、インデントしないですべて一行で出力します。

 #menu { border: solid 1px blue; margin: 1em 1em 1em 1em; width: 150px; } div { align: left; border: solid 1px green; }

クラスメソッド

new(param={:indent=>2})

new(param={:indent=>2}) { |css| ... }

それぞれ、オブジェクトを作成します。引数のハッシュオブジェクトにデフォルトのインデント文字数を指定することが出来ます。また、ブロックを指定した場合は、ブロックの引数に作成したオブジェクトが代入されます。

 require 'tenarai/css'
 
 css = Tenarai::CSS.new
 css.selector('#menu') do |s|
   s['width'] = '150px'
 end
 puts css.to_s
 
 puts Tenarai::CSS.new { |css|
   css.selector('#menu') do |s|
     s['width'] = '150px'
   end
 }.to_s

メソッド

selector(selecter, style={})

selector(selecter, style={}) { |s| ... }

CSS のセレクターを作成します。作成したセレクターは [], []= メソッドでスタイルを指定することが出来ます。

 require 'tenarai/css'
 
 css = Tenarai::CSS.new
 
 s = css.style('div')
 s['margin'] = '1em'
 s['background-color'] = 'silver'
 
 css.selector('p') do |s|
   s['padding'] = '1em'
   s['align']   = 'left'
 end
 
 puts css.to_s

これを実行すると、こうなります

 div {
   background-color: silver;
   margin: 1em;
 }
 
 p {
   align: left;
   padding: 1em;
 }

to_s(indent=nil)

オブジェクトを CSS に整形した文字列を返します。引数にインデントの文字数を指定することができます。

to_css

to_s のエイリアス

AdSense is disabled. Please check setting.