Использование SASS с заданными пользователем цветами

Question

Я создаю веб-сайт с Rails 3, который позволит пользователям создавать профили с различными макетами и цветовыми схемами.Я уже использую SASS, и переменные были бы неоценимы, если бы я мог сделать что-то вроде этого…

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

… где определение цветовой схемы было бы в основном (полностью?) Переменными SASS, определяющими используемые цветав макете.Очевидно, я не могу просто связать файлы SASS или CSS, как это, мне нужно импортировать их в SASS.

Как я могу динамически импортировать файлы SASS в анализатор во время запроса, а затем кэшировать полученные CSS-файлы для дальнейшего использования?

Я подумал о том, чтобы уродливомаршрут создания каждой возможной комбинации при развертывании, но это все еще оставляет меня в покое, если я хочу позволить пользователям устанавливать свои собственные цвета в будущем.Кажется, что такой низко висящий фрукт с SASS, что он может быть также реализован.

Answer 1

Хорошо, я копался в документах Sass, и похоже, что было бы возможно использовать их функции, но кажется, что это было бы слишком сложно и в любом случае могло бы вызвать проблемы позже.

Лучший способ, которым янашел сделать это, чтобы сгенерировать пользовательский шаблон, когда они обновляют свои настройки.В любом случае это работает лучше, так как запрос никогда не задерживается во время ожидания синтаксического анализатора.

# 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

Чтобы пользовательские цвета могли быть введены, пользовательский ввод может быть собран в переменные SASS css в строке и добавлен кфайл шаблона передается в механизм синтаксического анализа / рендеринга Sass.

Обновление:

Для каждого запроса приведен более подробный пример того, как это работает, сосредоточив внимание только на использовании переменных Sass и предварительномтаблица стилей Sass (закодированная для упрощения этой конкретной проблемы):

# 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