2012-02-24 176 views
17

我目前正在使用Eclipse的Aptana插件,它給了我很棒的語法高亮顯示,並且允許我手動單擊將* .scss文件編譯爲* .css文件。我真正希望能夠做到的是讓它每次保存時自動編譯,但我無法弄清楚如何執行此操作。Eclipse插件自動編譯Sass文件

我知道你可以在命令行上使用sass --watch,但是我不想在每次打開eclipse或創建一個新項目時手動設置它。

有沒有人找到實現這一目標的好方法?是否必須有一種方法可以連接到Aptana的Sass捆綁包並在我每次保存時運行它的編譯命令? this question接受的答案建議使用「程序生成器」 - 但這真的是最好的解決方案嗎?如果有的話,任何人都有任何提示/鏈接到教程?

更新:我寫了a blog post關於如何使用ant腳本作爲構建器,但我仍在尋找更好的方法。

+2

此頁面有幫助嗎? [鏈接](http://wirelesswombat.com/2012/06/17/automatically-compling-sass-compass-in-eclipse-zend-studio/) [1]:http:// wirelesswombat。com/2012/06/17 /自動壓縮 - sass-compass-in-eclipse-zend-studio/ – seron 2012-07-18 08:17:13

+0

@seron:你應該做出答案... – mliebelt 2012-07-19 05:15:39

+0

我遵循了你的建議。 – seron 2012-07-19 08:59:37

回答

2

有一個用於sass comiler的watch開關。
其中每當源(scss,sass)更改時重新生成輸出(css)文件。

從引用:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

使用薩斯

薩斯可以以三種方式使用:作爲命令行工具,作爲一個獨立的 紅寶石模塊,並作爲任何機架插件啓用了 框架,包括Ruby on Rails和Merb。所有 的第一步是安裝Sass寶石:

gem install sass如果您使用的是Windows,則可能需要先安裝Ruby 。

要在命令行中運行無禮,只是用

青菜input.scss output.css你也可以告訴薩斯觀看文件 每一次更新的CSS文件薩斯變化:

青菜--watch input.scss:output.css如果你有很多的Sass文件的目錄,
你也可以告訴薩斯觀看整個目錄:

青菜--watch應用程序/上海社會科學院:公佈ic/stylesheets使用sass --help完整的 文檔。

在Ruby代碼中使用Sass非常簡單。

引擎=薩斯:: Engine.new(「#主{背景色:#0000FF安裝薩斯寶石後, 您可以通過運行要求「青菜」,用薩斯::引擎像 所以用它}「,::語法 =>:scss)引擎。渲染#=>「#main {background-color:#0000ff;} \ n」

12

經過大量的嘗試後,我發現Eclipse中最好的解決方案是使用 - 更新sass功能:

  • 從項目菜單中選擇「屬性」,然後選擇「建設者」部分。
  • 創建一個新的Builder並選擇「Program」作爲配置類型。
  • 爲您的啓動配置選擇一個名稱(SASS ?!)。
  • 將您的sass安裝路徑插入位置字段。
  • 使用$ {project_loc}作爲工作目錄。
  • 在Arguments文本框中插入您希望sass使用的配置參數,並在最後指定--update參數,後跟sass文件目錄源,後跟「:」和編譯的css文件的目標文件夾。在我的配置中,「resources」是包含.scss文件的源文件夾,「web」是包含編譯後的.css文件的目標目錄。 --update命令將檢查源文件夾和所有子文件夾中的修改。 Screenshot
  • 在「構建選項」選項卡中,選中「運行構建器:」部分下的所有選項。只有在保存了所選文件夾中包含的文件時,您纔可以「指定相關資源的工作集」才能啓動構建器。 Screenshot
  • 單擊確定以保存啓動配置。
  • 現在嘗試修改源目錄中的.scss文件,然後保存它,您將在控制檯窗口中看到sass CLI輸出。

sass CLI將自動檢查源文件夾(配置中的資源)內部的修改資源並將它們編譯到目標文件夾(我的配置中爲web)中。另外,所有.import文件將導入修改後的資源。

+1

這對我來說似乎是一個非常合理的解決方案。 – 2016-04-28 15:07:55

+1

這工作得很好。我將.scss文件和.css文件放在同一個文件夾中,因此我使用「$ {project_loc}/src/main/webapp/css」作爲我的工作目錄,並使用「--update。:。」在論據中。 – 2016-05-26 03:06:33

+0

這個答案很棒!非常感謝 ! – Stilleur 2016-08-20 11:09:58

1

有更簡單的解決方案。只要按照說明從安裝SASS:

http://sass-lang.com/install

,你會發現,首先你必須安裝Ruby。在此之後,只要到您的SCSS/CSS文件所在的文件夾,啓動CMD並運行此DOS命令:

>cd <path-to-your-css-files> 
>sass --watch . 

然後,所有你需要做的就是連接你的SCSS文件被Eclipse作爲認可原生CSS文件。按照此解決方案:

https://stackoverflow.com/a/12322531/4180447

希望這有助於。

注意:我可能錯過了一兩步。這與我在完成安裝後記得的一樣。如果您遇到任何問題,請發表評論,我會盡力幫助你。

Tarek