官网less
1.把less转为css
在线转换网页：
2.定义列表，循环生成颜色变量
// 定义列表
@colors: blue, red, green;
// 使用 each 函数循环遍历 @colors 列表
.eachColor(@index) when (@index > 0) {
// 获取当前颜色
@color: extract(@colors, @index);
// 应用样式
.element-@{color} {
color: @color;
}
// 递归调用 eachColor 函数，实现循环
.eachColor(@index - 1);
}
// 根据 @colors 列表的长度确定循环次数
.eachColor(length(@colors));
解析如下：
.element-green {
color: green;
}
.element-red {
color: red;
}
.element-blue {
color: blue;
}
3.Less 支持两种类型的条件语句：if 和 when
4.定义主题颜色
默认黑色：<html lang="en" data-theme="dark">
主题切换
const [theme, setTheme] = useState<string>("dark");
//切换主题
const toggleTheme = () => {
const newTheme = theme === "light" ? "dark" : "light";
setTheme(newTheme);
// 设置 HTML 根元素的 data-theme 属性
document.documentElement.setAttribute("data-theme", newTheme);
};全局theme.less文件
// 定义前缀变量
@prefix: themeOnly;
#dark() {
primary: blue;
secondary: green;
}
#light() {
primary: red;
secondary: green;
}
// 定义主题映射对象
@themes: {
dark: #dark;
light: #light;
};
// 根据当前主题设置颜色
[data-theme="dark"] {
@colorPrimary: #dark[primary];//定义颜色变量
.@{prefix}-primary {
color: #dark[primary];
}
.@{prefix}-secondary {
color: #dark[secondary];
}
}
[data-theme="light"] {
@colorPrimary: #dark[primary];//定义颜色变量
.@{prefix}-primary {
color: #light[primary];
}
.@{prefix}-secondary {
color: #light[secondary];
}
}
扫一扫
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
