CSS 前處理器—sass

吴飞ff發表於2024-07-10

一、sass環境的安裝:

重點:sass是分了2個版本的,都是用來將sass編譯成css的工具。一個是node-sass,另一個是dart-sass。

  • node-sass:以前是用這個的,但是這個在安裝時有各種問題。偏偏以前有很多專案是用node-sass來處理scss的。【官方已經棄用
    • 需要 安裝一個二進位制程式(放在github上),沒有的話就需要用python進行編譯。在linux系統編譯時也是出現各種問題。
    • node-sassnode.js 版本相關聯,這就導致,一旦本地 node.js 升級,就會出現 node-sass 無法工作的情況。(很容易因為版本出現問題)
  • dart-sass:【官方使用的】
    • dart-sass 是用 drat VM 來編譯 sass。不依賴二進位制檔案就可以安裝(drat VM 本身就是 純 JS實現的),直接npm包下載下來就可以了。
    • 官方已經放棄 node-sass,使用dart-sass直接更名為sass了,在npm下載的包名就是sass。

node-sass 轉換成 dart-sass:https://juejin.cn/post/7327094228350500914
  說明:切換很簡單不需要配置,只要把node-sass解除安裝,安裝上sass就可以了。其它的就是一點語法的調整(sass官方也提供了調整的工具sass-migrator)。

  • 解除安裝node-sass安裝dart-sass:
    # 解除安裝node-sass
    npm uninstall node-sass
    # 安裝dart-sass
    npm install sass 
  • 深度選擇器 /deep/ 的修改:
    • sass 只支援 ::v-deep 【sass就是dart-sass】

相關文章