如何解决切换Dart Sass后出现Invalid parent selector "[type=button]"错误

这不是Dart Sass的bug，两款编译器的表现差异来自于语法校验严格程度不同：

• 已经停止维护的Libsass（sassc）对非规范写法的兼容度更高，会自动跳过拼接后逻辑无效的选择器，不会抛出编译错误
• 目前官方唯一维护的Dart Sass采用更严格的语法校验规则，要求所有父选择器拼接后的结果必须符合CSS语法规范，不会自动过滤无效拼接结果，因此会直接抛出错误

你当前的写法存在两处逻辑问题：

1. &a:link的写法不符合选择器拼接逻辑：&代表父选择器的完整字符串，直接在后面追加a会导致拼接结果异常，比如父选择器是a.button时，拼接后会生成非法的a.buttona:link，即使在Libsass中编译，这部分样式也无法正确命中元素
2. 父选择器列表中包含input[type=button]、button等非a标签元素，和:link、:visited伪类拼接后虽然语法合法，但本身不会被浏览器识别生效，Dart Sass报错的核心是旧写法的拼接逻辑存在不可预期的问题

根据你的实际需求选其中一种即可：

方案1：删除多余的a字符（最简便） #

如果你本意是给所有父级按钮元素加状态样式，直接把&后的多余a删掉即可，Dart Sass不会再报错，浏览器会自动忽略不匹配的伪类规则：

#{$buttonInputs},
div.buttons a,
span.buttons a,
a.button
{
    // (其他通用样式)
    &:link,
    &:visited
    {
        color: $buttonColor;
        text-decoration: none !important;
    }
}

方案2：拆分a标签按钮的专属样式（更规范） #

如果你希望只给a标签类型的按钮加链接状态样式，把这部分规则单独抽离，避免和非a标签的按钮选择器混合：

// 所有按钮通用样式
#{$buttonInputs},
div.buttons a,
span.buttons a,
a.button
{
    // (通用按钮样式，比如背景、边框、内边距等)
}

// 仅a标签按钮的专属样式
div.buttons a,
span.buttons a,
a.button
{
    &:link,
    &:visited
    {
        color: $buttonColor;
        text-decoration: none !important;
    }
}

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