[Sass+Compass] Rubyで作るカスタム関数と設定

RubyでSassの@functionを作ると色々やれて便利です。
CompassのConfig使うとより便利です。

RubyでSassの@functionを作る

これはSassだけでやれます。

1. 適当なファイルを作って拡張子.rbで保存する。

2. ファイルの先頭でsassをrequireする文を書く

require 'sass'

3. （2のつづきで）Rubyの構文に従ったモジュールを書く

module MyExtension
  def sample(str)
    return Sass::Script::String.new("#{str}")
  end
end

4. （3のつづきで）書いたモジュールをSassのFunctionsにincludeする

module Sass::Script::Functions
  include MyExtension
end

これでincludeしたモジュールのdefで定義したメソッドが@functionとして使えるようになる。

5. scssやsassファイルで使う


content:sample('hoge');

6. コンパイルする。
Sassの場合→ -r オプションでモジュールを書いたファイルを指定
Compassの場合 → config.rbでモジュールを書いたファイルを require

content: "hoge";

注意

defでメソッド定義するときにアンダースコアを使った時は、
sassファイルの方で使うときハイフンになります。

def sample_extension
#=> sample-extension

Sass::Script::String.newした文字列をCSSで文字列型として出力したい場合は
#{}でエスケープしてください。

#def sample(str = nil) である場合

Sass::Script::String.new("#{str}")
#=> "str"

Sass::Script::String.new("str")
#=> str

Sass::Script::String.new(str)
#=>Error!

Sassのオプションを利用する

#上書き
self.options[:style] = :compressed

#利用
self.options[:style]

または

#上書き
Sass::Plugin.options[:style] = :compressed

#利用
Sass::Plugin.options[:style]

Comapssのconfig.rbとの連携

Compassのconfig.rbで値を設定してそれをモジュールで使う方法。

Compassにはadd_configuration_propertyというメソッドが用意されているので
それをモジュール書いてるファイルとかで使えば設定が増やせます。

モジュールファイルにはcompassを使うためのおまじないを書いておく。

require 'compass'

add_configuration_propertyにはシンボル形式で設定したいプロパティ名を渡すだけでいい。

Compass::Configuration.add_configuration_property(:hoge_type)

config.rbにConfiguration.add_configuration_propertyが書いてあるファイルを読み込ませるrequireを書いておく。

require sass_dir + "/extension/MyExtension.rb"

hoge_typeというプロパティ名だとすると、
モジュールで使うときは Compass.configuration.hoge_type になる。

putsで値を確認（コンパイル）してみると、

module MyExtension
  def sample(str)
    puts Compass.configuration.hoge_type
    return Sass::Script::String.new("#{str}")
  end
end

大抵は
undefined method `strip_trailing_sepa
rator’ for Compass::Configuration:Module とか言われるので
以下のコードをどこかに貼付けておく。

module Compass
  module Configuration
    def self.strip_trailing_separator(*args)
      Data.strip_trailing_separator(*args)
    end
  end
end

※これはバージョン0.12.2時点でのバグらしい。

エラーが消えたら nil という文字がコンソールに出ると思います。

config.rbで適当な値を代入すると、コンソールに出る文字列も変わるはずです。

hoge_type = "foo"

デフォルト値

add_configuration_propertyにはdo〜endのブロックを渡すことができる。
そのブロックの中では他のプロパティが有効なので、
environmentの値に応じてデフォルト値を変更するなんてこともできるわけです。

Compass::Configuration.add_configuration_property(:hoge_type) do 
if environment == :production
    "foo"
  else
    "bar"
  end
end

[Sass+Compass] Rubyで作るカスタム関数と設定

RubyでSassの@functionを作る

注意

Sassのオプションを利用する

Comapssのconfig.rbとの連携

デフォルト値

参考文献

関連