¿Cómo pasar fácilmente una variable a un archivo .sass?

Question

Dentro de un proyecto de Rails, hay una variable para indicar en qué sitio queremos que se ejecute la aplicación Rails como, por ejemplo, para automóviles o barcos, y debería haber un sprite de CSS diferente si es un sitio de automóvil o un sitio de barco (el logotipo del sitio está dentro del sprite). ¿Cuál es una buena forma de pasar el valor de esta variable: "cars" o "boats" en el archivo .sass para que el archivo .sass use el sprite public/images/sprites/sprite-cars.png o public/images/sprites/sprite-boats.png?

Una manera posible es utilizar esto en un archivo de inicio en config/initializers

Sass::Plugin.options[:load_paths] = ["#{RAILS_ROOT}/app/views/templates/#{SITE_NAME}/"] 

y en el interior de app/views/templates/cars/ poner un _site_variables.sass allí y añadir una línea

@import "site_variables" 

en el archivo principal .sass. En _site_variables.sass, solo hay

$site_sprite_path: '/images/sprites/sprites-cars.png' 

Esto funciona, pero es un montón de trabajo para simplemente pasar una variable. ¿Hay alguna forma más simple?

Answer 1

La forma recomendada de hacer esto es definir una función personalizada Sass (ver the documentation) y utilice la opción de pasar :custom en sus variables específicas.

Answer 2

La documentación de Sass describe cómo agregar custom functions y menciona una opción :custom para las variables de configuración personalizadas.

Supongamos, por ejemplo, que desea que una función muestre el año actual. Hacer un archivo lib/sass_year.rb que contiene lo siguiente:

require 'sass' 
require 'sass/script' 

module Sass::Script::Functions 
    def year 
    Sass::Script::Value::String.new(Sass::Plugin.options[:custom][:year]) 
    end 
end 

Entonces, en algún lugar como environment.rb, incluir y configurarlo de la siguiente manera:

require Rails.root+'lib/sass_year' 
require 'sass/plugin' 
Sass::Plugin.options[:custom] ||= {} 
Sass::Plugin.options[:custom][:year] = Time.now.year.to_s 

Ahora puede utilizar la función del código Sass así:

div#copyright 
    content: "© 2001–#{year()} XYZ Corporation" 

En lugar del año actual, puede acceder a variables de entorno u otros datos de configuración. Tenga en cuenta que sin el to_s obtendrá una cadena dañada y, al depurar, asegúrese de borrar periódicamente tmp/cache para forzar la regeneración de su hoja de estilo.

Answer 3

Descargo de responsabilidad: odio socavar la respuesta de @ pdg137 pero mi código es demasiado grande para un comentario. ¡Váyelo por favor, por favor! No habría llegado aquí sin él.

---

Aquí está mi aplicación:

sass_helper.rb

require 'sass' 
require 'sass/script' 

module SassHelper 
    def generateHash 
    "asdf" 
    end 

    module Sass::Script::Functions 
    def foo() 
     Sass::Script::Value::String.new(options[:custom][:test]) 
    end 
    end 
end 

foo.html.erb

se = Sass::Engine.for_file('foo.scss', :syntax => :scss, :custom => { :test => generateHash }) 

foo.SCSS

body-#{foo()} { ... } 

Esto expone un método de generación de hash externamente que puedo usar para pasar como una opción para ser consumido por la interpolación SASS.

Calling SCSS functions from Ruby explica que no se puede llamar a métodos externos porque hay un ExecutionContext, que a su vez explica las evasivas con :custom y options.