SASS
编辑此页面SASS 是一种流行的 CSS 预处理器,它使 CSS 创作变得更加容易。它是 CSS 的超集,提供两种语法:SCSS 和缩进语法(通常简称为“SASS”)。
安装
安装依赖项
转换文件扩展名
安装后, .css
文件扩展名必须更改为 .scss
或 .sass
。 .scss
语法是 CSS 的严格超集,而 .sass
提供更宽松的语法。 Vite 与 Solid 集成,两者都支持。但是,通常建议使用 .scss
。
.grid { display: grid; &-center { place-items: center; }}.screen { min-height: 100vh;}.card { height: 160px; aspect-ratio: 2; border-radius: 16px; background-color: white; box-shadow: 0 0 0 4px hsl(0 0% 0% / 15%);}
在 Solid 组件中:
import "./card.scss";
function Card() { return ( <> <div class="grid grid-center screen"> <div class="card">Hello, world!</div> </div> </> );}
只需将文件扩展名从 .css
更改为 .scss
或 .sass
,Vite 就会自动识别这些文件,并按需将 SASS 编译为 CSS。在生产中构建时,所有 SASS 文件都会转换为 CSS。这确保了与大多数现代浏览器的兼容性。