0

I want to know, can we use scss in rails views eg

/views/home/home_stylesheet.css.scss.erb

$gray-medium-light : #eaeaea;

background: $gray-medium-light;

I tried changing the path format

<%= stylesheet_link_tag(about_me_user_path(current_user, format: :scss), media: 'all', class: "home_about_me_css") %>

And also in routes

get    'user_profile_stylesheet/:id'  => 'users#user_profile_stylesheet',  as: :user_profile_stylesheet, :defaults => { :format => 'scss' }

But rails seems to just convert the format back to css.

Can we use sass-rails gem to do this somehow?

Thanks.

EDIT I googled this with nothing coming up.

Lee Eather
  • 345
  • 3
  • 16

1 Answers1

1

Its theoretically possible by invoking the sass compiler. Note that you want to be using a request for css and not scss. There is no reason the client needs to know how the file is produced.

<%= stylesheet_link_tag(about_me_user_path(current_user, format: :css), media: 'all', class: "home_about_me_css") %>

class UsersController
  def user_profile_stylesheet
    respond_to do |f| 
      f.css do
        fn = Rails.root.join('app', 'views', 'home', 'home_stylesheet.css.scss.erb')
         # expand ERB template
        sass = render_to_string(file: fn)
        # run rendered template through the sass compiler
        css = SassC::Engine.new(sass, style: :compressed).render 
        render text: css
      end
    end  
  end
end

I'm not so sure its something you really want to do in production as it requires you to compile sass at run-time when responding to requests. And you won't be able reference anything like SASS functions in your assets pipeline since this is compiled outside the pipeline.

Its also a security nightmare since SASS is not just declarative like CSS. And this could be exploited to execute code on your server.

Whatever you're trying to do there has to be a smarter / less complex solution.

max
  • 96,212
  • 14
  • 104
  • 165
  • Isn't that the point of sass to use functions etc? I mean yeah i'm not sure on it all if something in sass will be harmful. – Lee Eather Mar 10 '20 at 03:49
  • The point is that malicious users can find bugs in the compiler even if the sass language does not let you do stuff like shelling out. It was not designed to accept untrusted code. – max Mar 10 '20 at 09:01
  • User provided CSS can also be a vector for XSS attacks as it can be used to inject markup. – max Mar 10 '20 at 09:04
  • I am trying to set a opacity for just the background, only in scss you can do this with only having a hex value as the color, eg rgba(#000000, 0.5). – Lee Eather Mar 12 '20 at 06:49
  • There are several HEX to rgb converters online that you can use. If you want to do it in the client you can use [choma.js](https://gka.github.io/chroma.js/). There is also a [ruby gem with the exact same name](https://github.com/jfairbank/chroma). – max Mar 12 '20 at 13:14
  • If your not building the next tumblr I would really just suggest that let the users either select ready made themes or just create a model which has a JSON column contains different parameters like background colors that the can tweak. – max Mar 12 '20 at 13:19
  • Ha yeah it is similar to tumblr. I mean I am just letting users choose string values then inserting them into the code. Like color fields etc – Lee Eather Mar 13 '20 at 01:43