官網地址： https://www.sass.hk/
我選擇官方推薦最簡單方案，最靠譜那個方案。
方案：寫一個scss文件,實時編譯生成一個css文件，一個html引進去再開個服務，瀏覽器中看的見寫的效果。
這樣子後就可以繼續學習了。否則看不到效果一切白搭。
首先安裝個Visual Studio Code 下載地址 https://code.visualstudio.com/
Visual Studio Code 現在也是前端流行編輯器。
Live Sass Compiler
安裝成功後
然後把下邊這段配置放上去
"liveSassCompile.settings.formats":[
// 擴展
{
"format": "compact",//可定製的出口CSS樣式（expanded，compact，compressed，nested）
"extensionName": ".min.css",//編譯後綴名
"savePath": null//編譯保存的路徑
}
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
接下來新建個文件夾，然後在裏邊新建一個html 文件 scss文件（看我箭頭指的，忽略其他文件）
在vscode中 按下F1 搜索 Live Sass: Watch Sass
點擊之後
控制檯顯示
此時你剛纔新建的文件夾內多了個 .css的文件
去你新建的html裏引入這個css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>測試sass</title>
<link rel="stylesheet" href="test.min.css">
</head>
<body>
<div id="app">
<h1>學習sass</h1>
</div>
</body>
</html>
在test.scss中先寫個簡單的
body {
background: blue;
}
接下來就是起個服務在瀏覽器裏看了。
點開你的html文件 在文件上右鍵
然後瀏覽器就被打開了。
看看是不是瓦藍瓦藍的。。。
生效了。。
接下來就可以安心看文檔測試了。