Utilizing SASS for customizable color schemes

Question

Utilizing SASS for customizable color schemes

I am in the process of creating a website using Rails 3 which will allow users to customize their profiles with different layouts and color schemes. I have already implemented SASS, and I believe it would be incredibly useful if I could achieve something like this…

<link src="base_styles.css" rel="stylesheet">
<link src="color_schemes/users_choice.css" rel="stylesheet">
<link src="layouts/users_choice.css" rel="stylesheet">

…where the color scheme details would mainly (if not entirely) consist of SASS variables specifying the colors to be used in the layout. Of course, I cannot simply link the SASS or CSS files in this way; I would need to import them into SASS.

Is there a way to dynamically import SASS files into the parser at request-time and then cache the resulting CSS files for future use?

I have considered the less optimal option of pre-building every possible combination upon deployment, but that approach falls short if I want to offer users the ability to set their own colors down the line. It feels like a missed opportunity with SASS, as though it should be possible to implement such functionality seamlessly.

ruby-on-rails css sass

Answer 1

Answer №1

After delving into the Sass documentation, it appears that achieving this task is indeed possible using their functions. However, it seems like a complex route to take and could lead to potential issues down the line.

The most effective way I've discovered to tackle this issue is by generating the user-specific template when they update their settings. This approach not only works more efficiently but also ensures that no requests are delayed while waiting for parsing.

# 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

To allow for custom colors, user-input can be compiled into SASS css variables in a string and added to the template file passed to the Sass parsing/rendering engine.

Update:

As per request, here's a detailed example demonstrating how this method functions, focusing specifically on utilizing Sass variables and a pre-designed Sass stylesheet (simplified for clarity):

# 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')

    # Constructing the SCSS string for the Sass rendering engine
    @sass = <<-SASS
      #{styles.to_sass}
      @import "#{base_stylesheet_path}";
    SASS

    # Cache set for long term
    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
    # Converting variable hash 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

Answer 2

After delving into the Sass documentation, it appears that achieving this task is indeed possible using their functions. However, it seems like a complex route to take and could lead to potential issues down the line.

The most effective way I've discovered to tackle this issue is by generating the user-specific template when they update their settings. This approach not only works more efficiently but also ensures that no requests are delayed while waiting for parsing.

# 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

To allow for custom colors, user-input can be compiled into SASS css variables in a string and added to the template file passed to the Sass parsing/rendering engine.

Update:

As per request, here's a detailed example demonstrating how this method functions, focusing specifically on utilizing Sass variables and a pre-designed Sass stylesheet (simplified for clarity):

# 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')

    # Constructing the SCSS string for the Sass rendering engine
    @sass = <<-SASS
      #{styles.to_sass}
      @import "#{base_stylesheet_path}";
    SASS

    # Cache set for long term
    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
    # Converting variable hash 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

Utilizing SASS for customizable color schemes

Answer №1

Update:

Similar questions

Hover image displacement

Does the downloading of images get affected when the CSS file has the disabled attribute?

What is the best way to apply a hover rule to a CSS class in order to change the color of a specific row when hovering in

The text field is being styled with inline styles automatically

Troubleshooting issues with the Bootstrap dropdown menu

Step-by-step guide on creating a blank horizontal line in an HTML table

tips for incorporating margin without sacrificing responsiveness

Steps for creating a resizable and automatically hiding side menu

How can you vertically center an icon button in Material UI?

Ensuring Consistent Vertical Spacing for CSS-Animated Bootstrap 5 Navbar Toggler Buttons in All Browsers

AngularJS flip card animation

fluid columns gliding from side to side

Arranging Bootstrap Cards in an Orderly Stack

The chosen color for the link button in CSS

Click on the link that surrounds an inline-block span in Internet Explorer

Tips for expanding the maximum width of a container using bootstrap4

Dropdown Box Linking and Input Field Integration in HTML

Creating a PHP-enabled HTML button that spans multiple lines

Aligning text to the right in Bootstrap 5 input fields

Issue with border spacing functionality