LESS
编辑此页面LESS 是一个基于 JavaScript 的预处理器。它提供了使用 mixin、变量和其他编程工具的能力,使样式代码更清晰、更少冗余。
Installation
安装依赖项:
使用 LESS
首先在 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。