Ghamtre Ghamtre - 5 months ago 7
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

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:

framework.sass
framework_overides.sass
homepage.sass
contact.sass
global.sass

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'
  File.open(app_css_file, 'w') {|f| f.write ""}

  # write to app_css_file
  File.open(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 Sass::Engine.new(IO.read(File.join(sass_dir, x.strip)), :syntax => :scss, :cache => false).render

      # convert and append sass
      when /sass/ then
        f.write Sass::Engine.new(IO.read(File.join(sass_dir, x.strip)), :cache => false).render
      end
    end
  end
end

5) Use this command: rake sass