还在硬编码按钮颜色？试试Sass颜色函数，改色只需改一个值
藏在Sass里的神仙偷懒技巧：90%的前端改按钮颜色还在逐行硬编码，学会这招，改色只动1个值，全页面直接同步更新。
做过前端的谁没被按钮颜色折腾过？
普通一个按钮少说有4种状态：默认基础色、鼠标移上去要变淡、点击的时候要变暗、禁用状态还得发灰。
我刚入行的时候傻得很，每个状态的色值全手动敲死，一个项目里七八种不同颜色的按钮，光色值我就得写二三十个。
上次产品临时拍板，要把全平台所有主色调从蓝色换成紫色，我对着CSS文件改了整整一下午，最后还漏改了3个边角位置，直接被测试打回返工，当时差点原地崩溃。
后来摸鱼翻Sass文档才反应过来，我之前纯纯在做无用功啊！
根本没必要把每个状态的颜色都写死，你只要定1个基础色，剩下所有状态的颜色，全用Sass自带的颜色函数自动生成就行。
操作超简单：先把所有硬编码的衍生色全删掉，只留一个基础色变量。
比如你要做紫色的按钮，就先定义变量：`$base: $purple;`
然后hover状态直接用lighten函数，把基础色提亮10%：
```scss
&:hover {
background: lighten($base, 10%);
}
```
点击active状态就用darken函数，把基础色压暗10%：
```scss
&:active {
background: darken($base, 10%);
}
```
禁用状态直接提亮20%，自动就能变成符合设计规范的浅灰调：
```scss
&:disabled {
background: lighten($base, 20%);
}
```
就这么几行代码，以后不管产品要换什么主色调，你只要改`$base`这一个变量的值，所有按钮的所有状态颜色都会自动同步调整，连多余的一个字符都不用多敲。
要是你页面里有好几种不同色系的按钮，那就更省事了：直接把所有基础色塞到一个颜色数组里，用Sass循环自动批量生成所有按钮的全状态样式。
之前改色要忙一下午的活，现在10秒钟就能搞定，维护成本直接砍到脚脖子。
我现在所有项目里的按钮全是这么写的，再也没因为改色被产品追着骂过。
你们平时写CSS还有什么压箱底的偷懒神技巧？评论区晒出来，大家一起抄作业啊！