Различные значения переменных SASS/Coffeescript в зависимости от сборки

Я пытаюсь создать систему сборки для интерфейсной среды, которая будет создавать разные пути в SASS (и, возможно, Coffeescript) в зависимости от того, куда я развертываю. Так, например, у меня может быть файл изображения, на который я ссылаюсь в своем SASS локально в ../images/image.png, и он отлично работает в моей локальной среде. Однако у моего клиента очень заблокированная среда, которую нужно делать по-другому (получая их изображения из CDN). Таким образом, их путь к изображению может выглядеть как ~Some_service_call/images/image.png.

Что я надеюсь сделать, так это подготовить какую-то конфигурацию для обеих сред, поэтому, когда я разрабатываю локально, я могу либо запустить команду через терминал, например build local package или build deploy package, которая автоматически распознает, в какую среду я развертываю, и использовать путь исходя из этого. В идеале я хотел бы иметь отдельный файл конфигурации JSON, который контролирует, какие пути использовать для каждой переменной SASS/Coffeescript.

До сих пор я начал изучать Grunt для этого, но не уверен, что это правильное решение. Кто-нибудь когда-нибудь пытался сделать что-то подобное, и что сработало/не сработало для вас?


deployment sass coffeescript gruntjs
person David Savage    schedule 04.04.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Используйте Compass для компиляции ваших проектов.

В Compass config.rb определите пользовательскую функцию:

# Assign a name to the project and pass it into SASS
$environment = "development"
module Sass::Script::Functions
  def environment
    Sass::Script::String.new($environment)
  end
end

Эта функция станет доступна в SASS:

$images-root: ".."
@if environment() == production
  $images-root: "/var/www/static/images"

html
  background-image: url( #{$images-root + "/sexy-lady.png"} )

И вы можете настроить это на свою подкладку! Например, вы можете передать пути к SASS. Или вы можете создать отдельный файл Ruby с некоторой расширенной логикой (сервисные вызовы, чтение JSON), потребовать его от config.rb и передать в функции SASS.

Наконец, вы пишете небольшой скрипт, который обновляет информацию и запускает compass compile.

PS Compass также позволяет добавлять отладочную информацию для разработки и минимизацию CSS для производства.

person Andrey Mikhaylov - lolmaus    schedule 04.04.2013
comment
Это кажется отличным подходом для SASS. Знаете ли вы, есть ли подобный метод для использования в CoffeeScript во время компиляции? Если это поможет, я использую Codekit для компиляции, но я не знаю о каких-либо функциях, которые он предоставляет для этой цели. - person David Savage; 16.04.2013
comment
Извините, я не работаю с CoffeScript (пока). PS Не забудьте принять ответ. Для CoffeeScript лучше оформить отдельный вопрос. - person Andrey Mikhaylov - lolmaus; 17.04.2013

arrow_upward
0
arrow_downward

Если вы не хотите создавать config.rb, просто используйте параметр environment в файле gruntfile.js и установите для него значение production или development. :

compass: {          
            prod: {
                options: {                  
                    environment: 'production'
                }
            },
            dev: {
                options: {
                    environment: 'development'
                }
            }
        }

и значение среды будет доступно в файле file.scss или file.sass:

$font-path: "../fonts";

@if compass-env() == 'production'
{
    $font-path: "../assets/fonts"
}
person Arthur Silva    schedule 10.09.2015