国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

VSCode下讓CSS文件完美支持SCSS或SASS語法方法

superPershing / 3862人閱讀

摘要：下讓文件完美支持或語法方法習慣后通常都是直接對文件進行處理但是大部分習慣的朋友也許不適應了我專門研究了一下在編輯器下如果配置相關代碼和設置達到文件完美編寫的辦法其他語法類型原理相似這里以為例開始配置編輯器設置的配置首先配置編輯器的設置按快捷

VSCode下讓CSS文件完美支持SCSS或SASS語法方法 
習慣Webpack + PostCSS后, 通常PostCSS都是直接對CSS文件進行處理, 但是大部分習慣SCSS/SASS/LESS的朋友也許不適應了. 我專門研究了一下, 在Visual Studio Code編輯器下如果配置相關代碼和設置達到CSS文件完美編寫SCSS的辦法, 其他語法類型原理相似, 這里以SCSS為例.
開始配置 Visual Studio Code編輯器設置的配置

首先, 配置編輯器的設置, 按快捷鍵"CTRL + ,"打開用戶設置, 添加如下配置片段:

"files.associations": {
  "*.css": "scss"
}

我這里做了全局的用戶設置, 因為我個人大部分情況下是寫SCSS, 當然如果你僅對該項目配置, 也可以將上面這段放進工作區(qū)設置(是放在默認花括號內哦, 千萬不要弄錯了~).

這樣, VSCode編輯器就會把所有CSS文件當成SCSS格式來解析了, 也就不會出現可怕的紅色波浪線了.

PostCSS的配置

接下來, 對PostCSS進行相關配置. 我們這里需要安裝最重要的兩個PostCSS插件postcss-scss和precss. 執(zhí)行命令:

npm i -D postcss-scss precss

安裝好后, 修改項目的postcss.config.js配置如下(我另外有用到autoprefixer和cssnano, 當然你可以根據個人情況選擇, 重要部分是parser: "postcss-scss"和require("precss")):

module.exports = {
  parser: "postcss-scss",
  plugins: [
    require("precss"),
    require("autoprefixer"),
    require("cssnano")
  ]
}

這樣問題就解決了. 試著編譯一下以下測試代碼:

/* css文件用scss語法測試 */
$blue: #056ef0;
.test {
  display: flex; // 這是scss注釋
  color: $blue;
  .box {
    flex: 1;
  }
}

編譯后:

.test{display:-webkit-box;display:-ms-flexbox;display:flex;color:#056ef0}.test .box{-webkit-box-flex:1;-ms-flex:1;flex:1}
Tips: 我用了cssnano, 因此注釋被自動去除, 如果需要保留, 需參閱cssnano文檔進行相關配置.
結語

至此, 我們的編輯器和項目都對CSS文件下編寫SCSS有了很好的兼容. 至于其他用SASS和LESS的朋友可以舉一反三, 安裝對應的插件和修改VSCode設置. 整個操作過程應該花不了十分鐘, 以后就能愉快的在CSS文件上面寫SCSS啦~ 關于本次測試的代碼可以訪問postcss study查看.

如果文中有誤, 或者還有什么疑問歡迎留言~

題外

如果有人還不是很清楚SCSS和Sass的區(qū)別可以閱讀Intro to SCSS for Sass Users

postcss-scss插件到底做了什么? 據我觀察, 行注釋會被轉換成標準的CSS塊注釋, 而其他的作用還尚未理解, 下面是官方描述:

This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.

關于Webpack + PostCSS環(huán)境如何搭建的, 需要哪些依賴包, 大家可以直接看我的前文提到過的DEMO項目

關于PostCSS我也才用不到一年, 感覺確實很方便, 幾乎可以替代SCSS了, 比如, 以前做項目需要引入第三方插件CSS, 而自己用的是SCSS, 那么Webpack解析就需要兩個規(guī)則匹配. PostCSS的插件也是非常的豐富, 經過幾年的發(fā)展, 很多插件為開發(fā)工作帶來很好的便利. 例如移動端適配的px轉rem單位的插件postcss-pxtorem, 我這里也有個完整的DEMO, 提供給大家參考~

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115667.html

相關文章

  • vscode常用插件【全了】

    摘要：插件集待補充。。。同時，它還包含了用于轉換為格式和生成數據模式的選項用于壓縮合并和文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為文件的選項。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題 插件集 待補充。。。 20180903 文件 【Path Intellisense】 自動補全路徑 瀏覽器 【Open-In-Browser】在...

    kyanag 評論0 收藏0

  • vscode常用插件【全了】

    摘要：插件集待補充。。。同時，它還包含了用于轉換為格式和生成數據模式的選項用于壓縮合并和文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為文件的選項。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題 插件集 待補充。。。 20180903 文件 【Path Intellisense】 自動補全路徑 瀏覽器 【Open-In-Browser】在...

    xcc3641 評論0 收藏0

  • 前端開發(fā)VScode常用插件

    摘要：名稱功能自動閉合標簽自動提示修改標簽時，自動修改匹配的標簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運行選中代碼段支持大量語言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色 名稱 功能 Auto Close Tag 自動閉合HTML標簽 Auto Import...

    hellowoody 評論0 收藏0

  • VS Code配置及插件推薦

    摘要：宋體以像素為單位控制字號。將其設置為可隱藏窗格。是否已啟用自動刷新是否啟用自動拉取以像素為單位控制終端的字號，這是的默認值。要求工作區(qū)使用高于版本的。 用戶設置 打開 文件 > 首選項 > 用戶設置(U)，（忽略覆蓋工作區(qū)提示） { // 一個制表符等于的空格數。該設置在 `editor.detectIndentation` 啟用時根據文件內容進行重寫。 editor.tabS...

    wpw 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<