Styling your Components

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。这确保了与大多数现代浏览器的兼容性。

报告此页面问题