不同SASS/CoffeeScript的基礎上構建

我試圖爲前端框架，將在SASS（以及可能的CoffeeScript）的基礎上我在哪裏部署創建不同的路徑創建構建系統變量值。例如，我可能在我的本地SASS中引用了一個映像文件../images/image.png，這在我的本地環境中工作正常。但是，我的客戶有一個非常鎖定的環境，必須以不同的方式完成（從CDN獲取其圖像）。所以他們的圖像路徑可能看起來像~Some_service_call/images/image.png。不同SASS/CoffeeScript的基礎上構建

我希望能做的是爲兩種環境準備好某種配置，所以當我在本地開發時，我可以通過終端運行一個命令，如build local package或build deploy package，它可以自動識別我部署的環境並使用基於此的路徑。我最好有一個單獨的配置JSON文件，該文件控制爲每個SASS/Coffeescript變量使用哪些路徑。

到目前爲止，我已經開始考慮咕嚕了這一點，但不知道它的正確的解決方案。有沒有人曾經嘗試過這種類型的東西，有什麼工作/不適合你？

來源

2013-04-04 David Savage

使用指南針編譯您的項目。

在羅盤的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

此功能將在上海社會科學院可用：

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

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

而且你可以自定義你的內襯！例如，您可以將路徑傳遞給SASS。或者你可以用一些高級邏輯（服務調用，讀取JSON）創建一個單獨的Ruby文件，從config.rb中請求它並傳遞給SASS函數。

最後，你寫一個小的腳本，更新的信息和運行compass compile。

PS指南針也允許添加的發展和CSS壓縮生產調試信息。

來源

2013-04-04 21:39:20

這似乎是SASS的一個很好的方法。你知道在編譯過程中是否有類似於CoffeeScript的方法嗎？如果它有幫助，我使用Codekit來編譯，但我不知道它爲此提供的任何功能。 – 2013-04-16 16:51:16

對不起，我不使用CoffeScript（還）。 PS不要忘記接受答案。對於CoffeeScript，更好地提出一個單獨的問題。 – 2013-04-16 20:50:00

如果你不希望創建一個config.rb，只需使用選項環境在gruntfile.js並將其設置爲生產或發展：

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

和環境值將可在file.scss或file.sass文件：

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

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

來源

2015-09-10 23:05:57

不同SASS/CoffeeScript的基礎上構建

回答

相關問題