scss在編輯器中儲存自動編譯css外掛程式及安裝

2022-01-29 05:35:19 字數 1429 閱讀 4787

1.vs code:

安裝兩個外掛程式:

sass

easy sass

2.webstorm:

安裝ruby:

我的是win10 x64系統,位址在這裡:

gem install sass
安裝完成以後進入webstorm:file-->settings-->tools-->file watchers-->

然後選擇+ --> scss

在program(編號1的輸入框),通過後面的資料夾符號選擇ruby的安裝路徑下的scss.bat

ruby安裝路徑 + \bin\scss.bat
然後在arguments中配置編譯引數(編號2的輸入框):

//

預設配置編譯引數

$filename$:$filenamewithoutextension$.css

//我的自定義配置編譯引數

--sourcemap=none --no-cache -t expanded $filename$:$filenamewithoutextension$.css

配置編譯的一些引數說明:

--sourcemap=none 不生成map檔案

--no-cache 不生成sass-cache資料夾

-t compact 每行樣式一行

-t nested 右括號在末尾

-t expanded 普通格式

-t compressed 壓縮成一行

3.在控制台使用sass命令編譯:

//

--sourcemap=none 不生成map檔案 --no-cache不生成sass-cache資料夾

# 右括號在末尾

sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style nested

# 普通格式

sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style expanded

# 每行樣式一行

sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style compact

# 壓縮成一行

sass index-pc.scss index-pc.css --sourcemap=none --no-cache --style compressed

vue檔案在編輯器Sublime Text3中高亮

概要 最近想要學習一下比較火的框架vue,在學習過程中發現我的編輯器sublime text3開啟vue檔案後沒法像編輯php檔案等那麼方便,順暢。想想肯定是要在編輯其中安裝vue相關外掛程式麼,那磨刀不誤砍柴工,首先讓我們來安裝vue外掛程式!一 安裝 package control 1 簡單的安...

CSDN markdown編輯器儲存

本markdown編輯器使用stackedit修改而來,用它寫部落格,將會帶來全新的體驗哦 markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成格式豐富的html頁面。維基百科 使用簡單的符號標識不同的標題,將某些文字標記為粗體或者斜體,建立乙個鏈結等,詳細...

編輯器 編譯器 IDE

之前一直分不清這些概念,今天心血來潮搜了一下,雖然還是不太懂 程式編輯器是指用來進行編輯程式的軟體程式,能把存在計算機中的源程式顯示在螢幕上,然後根據需要進行增加 刪除 替換和聯結等操作。例如 notepad vim sublime text 簡單講,編譯器就是將 一種語言 通常為高階語言 翻譯為 ...