首頁  >  文章  >  開發工具  >  vscode怎麼運作scss檔?

vscode怎麼運作scss檔?

青灯夜游
青灯夜游原創
2019-12-31 17:17:254957瀏覽

vscode怎麼運作scss檔?

vscode怎麼編譯執行scss檔?

1、sass的編譯依賴Ruby 環境,所以先安裝ruby

2、裝好Ruby後再命令列輸入gem sass 來安裝Sass

3、在vscode 擴充功能中尋找easy sass插件,安裝

vscode怎麼運作scss檔?

4、 接下來進行設定: 在vs code 選單列依序點擊“檔案首選項設定”,開啟settings.json 全域設定檔

vscode怎麼運作scss檔?

"easysass.compileAfterSave": true, 
 "easysass.formats": [ //nested:嵌套缩进的 css 代码。
//expanded:没有缩进的、扩展的css代码。
//compact:简洁格式的 css 代码。
//compressed:压缩后的 css 代码

        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "css/" //路径

5、新建一個資料夾,在資料夾中新建兩個資料夾,一個sass一個css,如果你沒有建css資料夾,編譯以後也會自動建一個資料夾的

vscode怎麼運作scss檔?

6、然後再sass下面建立demo.sass,然後寫

.box
    color: red
    .img
        width: 100%;
        display: block;

7、按下ctrl s,就直接編譯了,因為你之前設定的時候設定了easysass.compileAfterSave為true,所以儲存就會​​編譯一次,這也是為了提高開發效率  

最後你會發現再css下面多了一個css文件,一個min.css文件,這是和你再設置了設置的有關係的,一個沒有縮進,一個壓縮的

vscode怎麼運作scss檔?

相關推薦:vscode基礎教學

以上是vscode怎麼運作scss檔?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn