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

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

Implement jQuery to dynamically assign an "Active" class to tab elements based on the current page being loaded

The stacking order of a child element within a parent element, which has a transform

What methods can I use to ensure my HTML/CSS code is compatible with all browsers? It functions properly on Chrome but encounters issues on Safari, Edge, and other

Display an HTML code snippet on the webpage

Retrieve the background color using code-behind

Learn how to utilize ng-class to assign an ID selector to HTML elements

The appearance of Google Font CSS may vary when retrieved using WGET

What is the best way to create a sliding animation on a div that makes it disappear?

Issue with border radius in MUI 5 affecting table body and footer elements

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

Transforming the navigation menu using CSS, HTML, and jQuery

Learn how to use the CSS transform-scale() function to scale text independently from its container while maintaining proper alignment

Displaying or concealing dropdown menus based on a selected option

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Struggling to keep the footer anchored at the bottom of the page

Maintain font kerning for span elements that are not displayed inline

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

Distribute the elements evenly between two separate divs

The mobile page is refusing to scroll, causing all the text to bunch up at the top of the screen