Sass/SCSS如何将可配置变量首字母大写并保存为新变量？

嘿，作为Sass新手能尝试自己写字符串处理逻辑已经很棒啦！你的思路是完全正确的，但问题出在函数名称写错了——Sass里没有slice()函数，对应的字符串切片函数是str-slice()，这就是你代码没生效的核心原因。

修正你的原有代码 #

把slice()替换成str-slice()，同时修正你笔误的变量名$variant-color-multi-first-captial（应该是capital），修正后的代码就能正常工作了：

// 用户可修改的变量
$variant-color-multi: "multicolor";

// 提取首字符并转大写
$variant-color-multi-first: str-slice($variant-color-multi, 1, 1);
$variant-color-multi-first-capital: to-upper-case($variant-color-multi-first);
// 提取剩余字符
$variant-color-multi-rest: str-slice($variant-color-multi, 2, -1);
// 拼接得到首字母大写的新变量
$variant-color-multi-capitalized: $variant-color-multi-first-capital + $variant-color-multi-rest;

// 测试输出：当$variant-color-multi改为"bunt"时，这里会输出"Bunt"
@debug $variant-color-multi-capitalized;

更简洁的方案：使用str-capitalize()函数 #

Sass其实内置了专门的首字母大写函数str-capitalize()，能一步到位完成你想要的效果，代码更简洁：

// 用户可修改的变量
$variant-color-multi: "multicolor";

// 直接生成首字母大写的变量
$variant-color-multi-capitalized: str-capitalize($variant-color-multi);

// 测试输出："Multicolor"；改为"bunt"时输出"Bunt"
@debug $variant-color-multi-capitalized;

不过要注意：str-capitalize()会把字符串的首字母转大写，其余字母转小写。如果你需要保留原字符串中剩余字符的大小写（比如原变量是"muLticolor"，想要得到"MuLticolor"而不是"Multicolor"），那还是用第一种拼接的方式更合适。

内容的提问来源于stack exchange，提问作者Terminus