Usando funções SASS

Os pré-processadores CSS são incríveis, qualquer um negando que não lidou com servidores ou não escreveu CSS suficiente. Por exemplo, ao lidar com vários aplicativos com diferentes bases de código sendo roteados por um servidor proxy reverso, você pode se ver sendo limitado pelos ajudantes de ativos do sass-rails, já que o caminho gerado dentro de seus arquivos css não reflete o mesmo dinamismo daqueles em sua marcação.

SASS vem com um monte de coisas bacanas fora da caixa, uma delas são funções. Você pode declarar suas funções personalizadas em um inicializador e passar a lógica específica do Ruby para o seu CSS, não é legal?

Por exemplo, se por algum motivo quisermos criar um caminho de ativo diferente para nossas imagens, dependendo do ambiente em que estamos, podemos fazer isso implementando uma função SASS.

require 'sass'

module Sass::Script::Functions
  def environment
    Sass::Script::String.new(Rails.env)
  end
end

Em seguida, você pode usar essa função em seu SCSS da maneira que achar adequada, por exemplo:

$images_root: "/assets/";

@if environment() == "staging"
  $images_root: "/routed-application-url/assets/";

@else if environment() == "production"
  $images_root: "/routed-application-url-2/assets/";