webstorm下設置sass

時間 2019-11-17

標籤 webstorm 設置 sass 欄目 Storm 简体版

原文原文鏈接

關於sass，就不想多說什麼了。只要你有css基礎，十分鐘入門好嗎。能夠參考下資料：http://www.w3cplus.com/sassguide/css

今天想說的是webStorm下如何實現sass自動編譯。web

最近在學習SASS，研究了下編譯的方法，如今你們通常用的有兩種，一種是直接用命令行編譯，另外一種就是利用一些方便的編譯工具，例如騰訊的koala。後來我發現，原來webstorm早就支持了sass編譯 - - 真是貼心啊。。。。sass

廢話很少說，直接去webstorm配置去。ruby

打開settings，能夠看到Tools下面有個file watchers選項，點進去以下圖koa

右邊顯示的就是如今監視的實時編譯文件配置，SCSS和SCSS-min就是我配置的。webstorm

點擊加號，選擇SCSS或者SASS(根據本身寫的格式，SCSS是最新版的SASS後綴)，咱們這裏選擇是SCSS，進入配置界面ide

Name和Description就不用多介紹了，Options咱們暫時也不用管（實際上是我也不懂啥意思。。。）工具

File type就是咱們須要監視的文件類型，這裏固然是SCSS學習

Scope監視範圍能夠選擇不一樣監視範圍，這樣就能夠設置多個監視配置，輸出對應不一樣的目錄或者module下的SCSS文件。網站

Programe是scss編譯工具的目錄地址，由於SASS是依賴ruby的，因此咱們還須要去安裝ruby，ruby在window下的安裝文件下載能夠在 http://rubyinstaller.org/downloads/ 網站找到，我這裏下的193。其餘環境的能夠去官網下載：https://www.ruby-lang.org/

win環境的安裝很傻瓜，一路next就好了，不過記得在選擇目錄的時候，有個add to PATH選項必定要勾上，這樣就不用咱們手動配置環境變量了。其餘環境的沒有安裝過，百度吧。。。。

安裝好ruby之後，打開cmd，輸入gem install sass就能夠安裝SASS了，可是因爲gem的默認原地址因爲國內偉大的GFW緣由可能鏈接不上致使沒法安裝，因此咱們還須要替換一下。

依次輸入：

gem sources –r http://rubygems.org/

gem sources –a http://ruby.taobao.org/

gem sources –l

若是咱們看到最後顯示的地址只有國內淘寶提供的鏡像地址就OK了

而後再輸入gem install sass就能夠了，完成後輸入sass –v 就會返回sass的版本號。

OK之後，在webstorm裏面選擇本機ruby目錄下bin目錄裏面的scss.bat文件（若是須要編譯SASS文件則選擇sass.bat）

下面的輸出參數，能夠根據本身的須要填寫，下面列出的是一些經常使用的參數

--style表示解析後的css是什麼格式，如：--style compressed，有四種取值分別爲：nested，expanded，compact，compressed.
--sourcemap表示開啓sourcemap調試。開啓sourcemap調試後，會生成一個後綴名爲.css.map文件。 webstorm是默認開啓sourcemap的，因此能夠不填寫
--debug-info表示開啓debug信息，升級到3.3.0以後由於sourcemap更高級，這個debug-info就不太用了。

下面是四種格式編譯後的樣式：

 
        // nested 
       
        #main { 
       
        color 
        :  
        #fff 
        ; 
       
        background-color 
        :  
        #000 
        ; } 
       
        #main p { 
       
        width 
        :  
        10em 
        ; } 
       
        .huge { 
       
        font-size 
        :  
        10em 
        ; 
       
        font-weight 
        :  
        bold 
        ; 
       
        text-decoration 
        :  
        underline 
        ; } 
       
        //  
        expanded 
       
        #main { 
       
        color 
        :  
        #fff 
        ; 
       
        background-color 
        :  
        #000 
        ; 
       
        } 
       
        #main p { 
       
        width 
        :  
        10em 
        ; 
       
        } 
       
        .huge { 
       
        font-size 
        :  
        10em 
        ; 
       
        font-weight 
        :  
        bold 
        ; 
       
        text-decoration 
        :  
        underline 
        ; 
       
        } 
       
        //  
        compact 
       
        #main {  
        color 
        :  
        #fff 
        ;  
        background-color 
        :  
        #000 
        ; } 
       
        #main p {  
        width 
        :  
        10em 
        ; } 
       
        .huge {  
        font-size 
        :  
        10em 
        ;  
        font-weight 
        :  
        bold 
        ;  
        text-decoration 
        :  
        underline 
        ; } 
       
        // compressed 
       
        #main{ 
        color 
        : 
        #fff 
        ; 
        background-color 
        : 
        #000 
        }#main p{ 
        width 
        : 
        10em 
        }.huge{ 
        font-size 
        : 
        10em 
        ; 
        font-weight 
        : 
        bold 
        ; 
        text-decoration 
        : 
        underline 
        }