SAP Spartacus元素被选中后，focus颜色的css实

如下图，当按下tab键，让Spartacus元素处于被选中状态后，显示的蓝色border：

这个border的颜色通过变量--cx-color-visual-focus定义：

我们点击storefronstyles的root.scss， 发现里面并没有--cx-color-visual-focus这个变量：

奥妙在root.scss的这行@import 'theme'：

单击进去：

在_variables.scss里有变量visual-focus:

这些颜色通过root.scss里的下列代码展开：

@each $color, $value in $theme-colors {
    --cx-color-#{$color}: #{$value};
  }

更多Jerry的原创文章，尽在："汪子熙":