在public文件夹下有入口文件index.html，在入口文件中引入同文件夹下的less文件。在public文件夹下创建theme.less文件并在文件中声明less
变量
，如下。在使用到切换主题
颜色
的地方加上公共样式color，如下。点击切换主题触发点击事件时，
修改
less
变量
（在切换主题的react文件里导入less。）的值，其中value值为切换的
颜色
值。
首先，先说一下我最初的思路。
我最初的想法是使用less定义
变量
，然后通过js来切换
变量
，通过切换的
变量
来达到换肤的效果。
我先新建了一个 theme.less文件，代码如下：
@theme:@themea;
@themea:pink;
@themeb:blue;
@themec:gray;
如我最开始的想法，应该是通过点击事件来改变
变量
@theme 的值。
我用了element-ui这个框架，所以我的下拉菜单的代码也不复杂：
<el-dropdown class=colorBtn trigger=cli
Less语言大大减少了
css
语言的代码复杂量，如果想要改变某元素的
颜色
透明度
可使用fade()算法
fade("
颜色
值",
透明度
百分比)，百分比越小，
透明度
越强 如fade(red,20%)
例子如下：
@base :black;
@width :10px;
@base-color: red;
.radius {
border-radius: 4px;
再加上贴边的宽度，对于内容本身就比较窄的区域来说，这种样式笨重感十足！less模式下，如何更改定义好的
颜色
变量
的
透明度
呢？大灰块做背景，内嵌小灰块做滚动距离的展示。而像这种样式的滚动条就比较可以了。有滚动条的容器滚动条属性{}fade(
颜色
变量
，透明百分比)就可以在里面设置对应的样式了。这样就可以啦，快去试试吧。上面是滚动条相关的属性。......
escape(@string); // 通过 URL-encoding 编码字符串e(@string); // 对字符串转义%(@string, values...); // 格式化字符串unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位color(@string); // 将字符串解析为
颜色
值data-uri([mimetype,] url);
之前已经为大家介绍了一些LESS函数，大家应该对之前介绍的有所了解了。下面为大家介绍一系列的
颜色
运算函数。依旧会为大家附上小例子。希望这些有关LESS的函数能在大家编写LESS的时候有所帮助。
客户端使用
// 引入 .less 文件，rel 属性值为：“stylesheet/less”
<link rel="stylesheet/less" type="text/
css
" href="index.les...
less前言Less 是一门
CSS
预处理语言，它扩充了
CSS
语言，增加了诸如
变量
、混合(mixin)、函数等功能，让
CSS
更易维护、方便制作主题、扩充。安装客户端使用// 引入 .less 文件，rel 属性值为：“stylesheet/less”// 在引入 .less 文件之后，引入 less.js 文件，官网下载或者使用CDN;监控模式 是客户端的一个功能，当改变样式的时...
颜色
值运算函数
注意事项：
颜色
值运算的时候要保证单位是相同的，计算时候百分比会通过绝对值来处理，参数必须在限定的范围内，不能超过界限（比如饱和度值最大是100%，那么计算时候最大值就不能超过100%）。返回值会自动转换成十六进制的
颜色
值
saturate()函数
作用：增加一定数值的
颜色
饱和度
Less中编写
background:hsl(90,80%,50%);
background:saturate(hsl(90,80%,50%),20%);
编译后的结果
JavaScript语言：JaveScriptBabelCoffeeScript确定(function() {if ("performance" in window == false) {window.performance = {};}Date.now = (Date.now || function() { // thanks IE8return new Date().getTime();});...
