昨日の「Ruby初心者だけどゼロパディングするカスタムSassファンクションを作ってみた」に引き続き、文字列を置換するカスタムSass関数(custom Sass functions)を作ってみました。以前ヨモツネットの@yomotsuさんが「SVG GradientをSASS(LESS)で生成してCSS Gradientとして扱うmixin」の中で「SASSで文字列のreplaceができればいいのですが...。」と書かれていたので、需要があるかなと思った次第です。

• ※ "custom Sass functions"を昨日は「カスタムSassファンクション」と訳したのですが、今日からは「カスタムSass関数」と訳すことにします。「カスタムSass関数」の方が分かりやすく、しっくりくる気がするので...。

関数のコード

require "sass"

module SkywardDesignFunctions
    def str_replace(search_cond, replace_str, str)
        assert_type search_cond, :String
        assert_type replace_str, :String
        assert_type str, :String

        if (/\/.+\// =~ search_cond.value) then
            search_cond.value.gsub!(/\//, "")
            retVal = str.value.gsub(/#{search_cond.value}/, replace_str.value)
        else
            retVal = str.value.sub(search_cond.value, replace_str.value)
        end

        Sass::Script::String.new(retVal)
    end
end

module Sass::Script::Functions
    include SkywardDesignFunctions
end

• ※ GitHubからダウンロードできます。

仕様

下記のように引数を指定して呼び出します。

str-replace("検索文字列", "置換文字列", "検索・置換対象文字列")

最初にマッチした文字のみ置換

// 呼び出し
str-replace("o", "+", "Hello World")

// 結果
Hell+ World

正規表現で置換

検索文字列を「/」で挟むと、正規表現で指定したものとして扱います。

// 呼び出し
str-replace("/o/", "+", "Hello World")

// 結果
Hell+ W+rld

使用方法

昨日のゼロパディング関数と同じですが、再掲します。

1. 上記コードを任意のディレクトリに任意の名前で保存するか、GitHubからダウンロードします（例：skyward_design.rb）。
2. 置換したい場面でstr-replace("検索文字列", "置換文字列", "検索・置換対象文字列")と記述します。例えば次のようなコードです。

   $tmp: "";
   .sample:after{
   	$tmp: str-replace("o", "+", "Hello World");
   	content: "#{$tmp}";
   }
   

3. 次のように-rオプションでカスタムSass関数のファイルを指定してコンパイルします。

   sass sample.scss sample.css -r skyward_design.rb

Compassを使っている場合

Compassを使っている場合はconfig.rbに次のコードを追加します。コンパイルのコマンドはcompass watch(compass compile)でOKです。

require "./skyward_design.rb"