Rails – SCSSで入力した文字列をCSSに変換する

投稿日: by keruu

フォーム等で入力したSCSS文字列をCSSに変換するには、SASS のRubyモジュールを使用します。

環境

  • Rails 3.1以上

Gemのインストール

Gemはsassを使います。sass-railsを使っている場合は依存関係で自動的に導入されるはずなので不要です。

gem 'sass'

変換メソッドの作成

ヘルパーメソッドを次のような感じで作ります。

@app/helpers/application_helper.rb

module ApplicationHelper
 require 'sass'

 def scss_to_css(scss_text)
  engine = Sass::Engine.new(scss_text, :syntax => :scss)
  engine.render
 end
end

変換する

ビューでSCSSをCSSに変換して、styleタグ内で使用します。もしくは事前に変換しておきます。

@app/views/***.html.erb

<style>
 <%= scss_to_css("SCSS文字列") %>
</style>

例

<style>
 <%= scss_to_css("#abc { p { color: red; } }") %>
</style>

下のようにCSSに展開されます。

<style>
 #abc p {
  color: red;
 }
</style>

参考リンク

 

CSS SASS