<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="/xml.xsl" type="text/xsl"?><feed xmlns="http://www.w3.org/2005/Atom">
  <title>nulog, NULL::something : out of the headphone &gt; 2006 &gt; August &gt; 02 &gt; CSS で変数が欲しい！の……</title>
  <link href="http://lowreal.net/logs/2006/08/02/1"/>
  <icon>http://lowreal.net/img/banner.png</icon>
  <link rel="self" type="application/atom+xml" href="http://lowreal.net/logs/2006/08/02/1.atom"/>
  <link rel="alternate" type="application/xhtml+xml" href="http://lowreal.net/logs/2006/08/02/1.xhtml"/>
  <updated>2006-08-02T01:34:18+09:00</updated>
  <author>
    <name>cho45(砂糖)</name>
  </author>
  <id>http://lowreal.net/2006/08/02/1</id>
  <entry>
    <title>CSS で変数が欲しい！の……</title>
    <link rel="alternate" type="text/html" href="http://lowreal.net/logs/2006/08/02/1.html"/>
    <link rel="alternate" type="application/xml+xhtml" href="http://lowreal.net/logs/2006/08/02/1.xhtml"/>
    <updated>2006-08-02T01:34:18+09:00</updated>
    <published>2006-08-02T01:34:18+09:00</published>
    <id>http://lowreal.net/2006/08/02/1</id>
    <category term="css"/>
    <content type="xhtml" xml:base="http://lowreal.net/">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <p>
          <a href="http://d.hatena.ne.jp/secondlife/20060802/1154445231">川o・-・）＜2nd life - ファイル保存時に ERb でコンパイルして保存</a>
        </p>
        <p>これの別方向バージョンです。 (最近こんなんばっかだ。パクりマンセー)</p>
        <p>CSS 特化でいいかなぁとか思いつつ簡単なスクリプトを通して置換するだけっていうのをやってみることにしました。ERB にせよ、なんにせよ、クライアントサイドでやってる限りは書いてる人の好き放題なのがいいところです。ERB のほうが別の場合も常に使えていいんですが。</p>
        <pre class="Ruby">#!/usr/bin/ruby

pre = File.read(ARGV[0])
vars = Hash[*pre.scan(/^\s*\*\s+([^\s;]+)\s*=\s*(.+$)/).flatten]
#p vars
ret = pre.gsub(/\#\{([^\s;]+)\}/) do |match|
        if vars.key?(Regexp.last_match[1])
                vars[Regexp.last_match[1]]
        else
                match
        end
end
File.open(ARGV[1], "wb") {|f| f.puts ret }
</pre>
        <p>第一引数に変換する前のファイル名、第二引数に変換したあとのファイル名を与えます。</p>
        <p>vim 側は id:secondlife さんのやつを完全パクりでお送りいたします。指定した実行ファイルに保存時、ファイル名を与えて実行するだけ。<samp>~/.vim/plugin/css_pre_compile.vim</samp></p>
        <pre class="vim">
if v:version &lt; 700 || (exists('g:loaded_css_pre_compile') &amp;&amp; g:loaded_css_pre_compile || &amp;cp)
        finish
endif
let g:loaded_css_pre_compile = 1

if !exists('g:css_pre_compile_exec')
        let g:css_pre_compile_exec = '/home/cho45/proj/mendoi/compile-css.rb'
endif

if !exists('g:css_pre_compile_name')
        let g:css_pre_compile_name = 'pre'
endif

function! s:CssPreCompile()
        let filename = expand('%:p')
        let compiled_filename = substitute(filename, '\.' . g:css_pre_compile_name . '\.css$', '.css', '')
        call system(g:css_pre_compile_exec . ' ' . filename . ' ' . compiled_filename)
endfunction

exe 'autocmd BufWritePost *.' . g:css_pre_compile_name . '.css call &lt;SID&gt;CssPreCompile()'
</pre>
        <p>でもって編集する CSS</p>
        <pre>/*
 * * Colors
 * key-color-dark  = #123456
 * key-color-light = #234567
 *
 * * Images
 * imgdir = /img/hogehoge
 *
 * * Other Constants
 * content-x-margin = 5%
 */

h1 {
        background: #{key-color-dark} url("#{imgdir}/head.jpg") no-repeat top left;
        height: 235px;
        width: 50px;
}

/* 諸事情で #content に padding が指定できないとか */
#content .section {
        margin: 0 #{content-x-margin};
}

#content .h2 {
        margin: 0 #{content-x-margin};
}

#footer {
        background: #{key-color-dark};
        color: #fff;
}

#footer address {
        color: #{key-color-dark};
        background: #{key-color-light};
}

</pre>
        <p>この場合頭に書いた宣言部分は消えないので、キーカラーを最初に明示しておく、なんてことが自然にできます。そういえば自分はよく色の頭二文字ぐらいを覚えて動的補完カマして入力するんですが、最初の二文字さえ最近覚えるのがダルイです。</p>
        <hr/>
        <p>ちょっと使ってみよう。が、しかし、すぐに使わなくなる予感が！　といっても一回放り込めば使って悪いことはないので使えるかな。わからない。一ファイルで完結していないのがイマイチ。オートリロードとの兼ね合いもあるかも。あれダメダメじゃん。</p>
        <p>Ruby 限定にするなら、探し出した変数宣言を module_eval とかで読み込んで、eval("&lt;&lt;EOF\n#{file_content}\nEOF") みたいなことやってもいい？　式が書けるようになるけど、エラーでてもわからなく。移植性が落ちる。</p>
        <hr/>
        <p>でもやっぱ。ERB のほうがループとかも書けていい気がする。&lt;% が打ちにくいからそれだけなんとかできればいいような気もする。ねむい</p>
      </div>
    </content>
  </entry>
</feed>
