Styling your Components

LESS

LESS 是一个基于 JavaScript 的预处理器。它提供了使用 mixin、变量和其他编程工具的能力，使样式代码更清晰、更少冗余。

Installation

安装依赖项：

首先在 src 目录中创建一个 .less 文件：

.foo {
  color: red;
}
.bar {
  background-color: blue;
}

LESS 的基本语法与 CSS 非常相似。然而，LESS 允许声明和使用变量：

@plainred: red;
@plainblue: blue;
.foo {
  color: @plainred;
}
.bar {
  background-color: @plainblue;
}

要在 Solid 组件中使用这些样式，请导入 .less 文件：

import "./styles.less";

function Component() {
  return (
    <>
      <div class="foo bar">Hello, world!</div>
    </>
  );
}

通过将导入样式的文件扩展名更改为 .less ，Vite 会将其识别为 LESS 文件，并按需编译为 CSS。