Ghamtre Ghamtre - 1 year ago 78
Ruby Question

How to use 'SASS' from html template on a rails app?

I'm trying to install an html template in my rails app, so I moved all the assets on public folder and renamed all the html files in erb.

Everything works fine except that 'sass' is not working, any file from the SASS folder of the html template is not doing their work.

So how can I make use of the SASS files of the html template on my rails app?

Answer Source

So how can I make use of the SASS files of the html template on my rails app?

1) Install the SASS Gem gem 'sass' in your Gemfile if you're using bundle install, or via the command line: gem install sass

2) Create a file named 'manifest.txt' in your SASS folder, for example public/src/sass/manifest.txt

3) In manifest.txt list each file in the order of inclusion you want merged into a single CSS file, like:


4) Open your Rakefile and create this rake task:

require 'sass'
desc "Parse SASS manifest.txt and convert to single CSS file"
task :sass do
  # your template directory
  src_dir = File.join Rails.root, 'public/src'

  # SASS directory
  sass_dir = File.join src_dir, "sass"

  # name of the single output file
  app_css_file = File.join src_dir, "css/application.css"

  # parse SASS manifest
  sass_manifest = IO.readlines File.join(sass_dir, "manifest.txt")

  # clear previous app_css_file, without having to require 'fileutils', 'w') {|f| f.write ""}

  # write to app_css_file, 'a+') do |f|
    sass_manifest.each do |x|

      # remove code comments
      next if x.strip =~ /^#/

      # parse extension
      case syntax = File.extname(x.strip).delete('.').downcase

      # convert and append scss
      when /scss/ then
        f.write, x.strip)), :syntax => :scss, :cache => false).render

      # convert and append sass
      when /sass/ then
        f.write, x.strip)), :cache => false).render

5) Use this command: rake sass

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download