StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Alright I dug into the Sass docs and it looks like it would be possible to do using their functions, but it seems like it'd be overly complicated and introduce problems later anyways.</p> <p>The best way I have found to do this is to generate the user-specific template when they update their settings. This works better anyways, as a request is never delayed while waiting on the parser.</p> <pre><code># unless cached_copy_exists template = %Q{ @import '/path/to/color_scheme'; @import '/path/to/layout'; } output = Sass::Engine.new(template, :syntax => :scss).render # output rendered CSS to file for inclusion in HTML template </code></pre> <p>In order to allow custom colors, user-input could be assembled into SASS css variables in a string and prepended to the template file being passed to the Sass parsing/rendering engine.</p> <h1>Update:</h1> <p>Per request, here's a more fleshed-out example of how this works, focusing just on using Sass variables and a pre-coded Sass stylesheet (simplified to isolate this specific problem):</p> <pre><code># config/routes.rb resources :stylesheets, only: [:show] # app/controllers/stylesheets_controller.rb class StylesheetsController < ApplicationController layout nil def show styles = Stylesheet.find(params[:id]) base_stylesheet_path = Rails.root.join('app', 'assets', 'profile.scss') # Build the string of SCSS we'll pass to the Sass rendering engine @sass = <<-SASS #{styles.to_sass} @import "#{base_stylesheet_path}"; SASS # Cache for long time response.headers['Cache-Control'] = "public, max-age=#{1.year}" respond_to do |format| format.css end end end # app/views/stylesheets/show.css.erb <%= raw Sass::Engine.new(@sass :syntax => :scss).render -%> # app/models/stylesheet.rb class Stylesheet < ActiveRecord::Base serialize :variables, JSON def to_sass # Convert a hash of variables into SCSS variables.each_pair.map do |name, value| "$#{name}: #{value};" end.join("\n") end end # example for the stylesheet model stylesheet = Stylesheet.new stylesheet.variables[:primary_color] = "#0000ff" stylesheet.save </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload