scss给不包含某个规则开头的类名添加颜色

需求： 默认的el-button的四种状态设置自定义颜色
问题：设置.el-button样式影响到其他success、info、error等按钮的样式
解决方案：default按钮不包含'el-button--'开头的类名就是默认按钮，那给不包含的el-button设置样式就不会影响其他按钮
按钮四种状态：normal（普通状态）、hover（悬停状态）、active（活动状态）和focus（聚焦状态）
css写法

• 使用属性选择器[class^="el-button-"]来针对所有以“el-bbutton-”开头的类名
• 设置背景颜色为红色

[class^="el-button--"] {
  background-color: red;
}

scss写法

• 定义了一个变量 $button-prefix: "el-button--";
• 使用属性选择器[class^="#{$button-prefix}"], [class*=" #{$button-prefix}"]，来选中以 “el-button–” 开头的类名，以及包含空格和 “el-button–” 的类名

[class^="#{$button-prefix}"], [class*=" #{$button-prefix}"] {
  background-color: red;
}

上面两种写法效果：除了Defailt按钮，其他按钮含‘el-button--’l类名都设置成红色按钮了

<button aria-disabled="false" type="button" class="el-button">Default</button>
<button aria-disabled="false" type="button" class="el-button el-button--primary">Primary</button>
<button aria-disabled="false" type="button" class="el-button el-button--success">Success</button>
<button aria-disabled="false" type="button" class="el-button el-button--info">Info</button>
<button aria-disabled="false" type="button" class="el-button el-button--warning">Warning</button>
<button aria-disabled="false" type="button" class="el-button el-button--danger">Danger</button>

$disabledColor: #ccc;
$button-prefix: 'el-button--';
$button-link: 'is-link';
.el-button {
  width: 80px;
  height: 28px;
}
.el-button:not([class^='#{$button-prefix}'], [class*=' #{$button-prefix}'], [class*=' #{$button-link}']):hover,
.el-button:not([class^='#{$button-prefix}'], [class*=' #{$button-prefix}'], [class*=' #{$button-link}']):visited,
.el-button:not([class^='#{$button-prefix}'], [class*=' #{$button-prefix}'], [class*=' #{$button-link}']):focus {
  color: #606266;
  background-color: #f6f6f6;
  border-color: #f6f6f6;
}
.el-button:not([class^='#{$button-prefix}'], [class*=' #{$button-prefix}'], [class*=' #{$button-link}']):active {
  background-color: #ebebeb;
  border-color: #ebebeb;
}

这里活动状态定义了一种灰色，其他状态是另一种灰色