在Vscode中安裝Sass并配置
- sass簡介
- 安裝Sass插件
- 配置sass插件
- 編寫sass
- 使用Sass
sass簡介
Sass（Syntactically Awesome Style Sheets,英文官方文檔
）是一種CSS預處理器，擴展了CSS的功能并提供了更高效的樣式表編寫方式。它兼容所有CSS版本，通過變量、嵌套、混合（Mixins）、繼承等特性簡化了復雜樣式表的開發。
Sass支持兩種語法格式：
- SCSS（Sassy CSS）：后綴為.scss，兼容CSS語法，使用大括號和分號。
- 縮進語法（Indented Syntax）：后綴為.sass，省略大括號和分號，依賴縮進。
編譯與工具
Sass文件需編譯為標準CSS才能被瀏覽器識別。常用工具包括：
命令行工具：通過Dart Sass或LibSass執行編譯。
構建工具集成：Webpack（sass-loader）、Gulp（gulp-sass）等。
開發環境插件：VS Code的Live Sass Compiler擴展。
安裝Sass插件
在vscode擴展市場搜索sass插件，當前選中的是Live Sass Compiler，sass實時編譯插件
配置sass插件
在插件擴展市場打開Live Sass Compiler的配置頁面。
更改配置如下：formats是默認已存在配置，可替換或者自行更改屬性均可。generateMap、autoprefix為新增。formats新版只有”expanded、compressed“兩種，可查看其使用說明。
"liveSassCompile.settings.formats": [ /* nested-嵌套格式,嵌套格式（保留層級結構）已廢除，用的話會報錯* expanded-展開格式（默認值，保留縮進和換行）* compact-緊湊格式,緊湊格式（每條規則獨占一行）已廢除，用的話會報錯* compressed-壓縮格式,壓縮為單行（刪除所有空格和注釋）*/ {"format": "expanded",//定制輸出得css格式"extensionName": ".css","savePath": "~/../css",//指定存儲地址"savePathReplacementPairs": null}],/* 生成css映射文件 */"liveSassCompile.settings.generateMap": true,/* 是否添加兼容前綴，例如--webkit-、-moz-、-ms-、-o-等 */"liveSassCompile.settings.autoprefix": [ "last 10 versions","> 1%",]
編寫sass
新建一個名字為sassDemo的項目，在項目下新建一個sass文件夾，再新建一個demo.scss文件，內容如下：
$background-color: #000000;
P{color: $background-color;
}
保存后即可看到與sass同目錄生成了一個css文件，且已存在demo.css、demo.css.map。如果生成不成功，點擊下方圈中的紅色監聽處。
使用Sass
在項目根目錄新建一個index.html。（在文件內輸入!回車，可自動生成簡易html內容）
引入的樣式文件為最終輸出的css文件，編寫的時候只需要維護sass即可。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/demo.css">
</head>
<body><p>Hello World!</p>
</body>
</html>
剖析——從π0模型架構的實現：如何基于PaLI-Gemma和擴散策略去噪生成動作，到基于C/S架構下的模型訓練與部署)
