官网less
1.把less转为css
在线转换网页：
LESSTESTER - Less Sandbox
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];}
}
