Visual Studio Code 無法識別 CSS 文件中的變量

Question

我正在使用 Visual Studio Code 並且我在 CSS 文件中遇到了問題 vith 變量，當我輸入美元符號時，css 文件報告錯誤並且瀏覽器不會看到文件中的更改。

Answer 1

似乎您想使用 SCSS ( Sass )，但您似乎根本沒有安裝 Sass 或者 Visual Studio 代碼需要一個插件。 可能你現在知道該怎么做了。

Answer 2

這就是定義 CSS 變量的方式。 您正在查看的變量用於 SCSS。 要使用 SCSS，你需要像node-sass這樣的東西

 :root { --primary-color: red; } div { background: var(--primary-color); width: 200px; height: 200px; } body { color: var(--primary-color); }

 <div></div> <p> Lorem ipsum </p>

要使 VSCode 了解 SCSS，請確保文件按原樣存儲 ( .scss )。 如果這仍然不起作用，請將語言模式設置為 SCSS。 語言模式可以在右下角找到。

Answer 3

您正在編寫 sass 語法，因此您需要使用 (.scss) 擴展名保存文件，並且由於Sass是一種預處理器腳本語言，因此您還需要一個編譯器來獲取已編譯的 css 版本，例如vscode 中的 live sass 編譯器擴展能夠將 .css 文件與您的 index.html 文件連接起來