Sass map 类型语法高亮，key 是灰色的

[duduluu]

根部时map的key是黑色，在代码块中时key是灰色，不够显眼。

希望能改成 js 对象那样，属性名是红色高亮 :)

[fisheva]

@duduluu 可以把您这个Sass文件里的代码全部粘贴一份给我吗? 因为我调试的时候需要案例代码, 谢谢!

[duduluu]

$namespace: 'vd';

/*----------  Component  ----------*/
@function class-comp($component) {
  @if $component != to-lower-case($component) {
    @error 'Must use lower case class name for a component. "#{$component}"';
  }
  @return '#{$namespace}-#{$component}';
}
/**
 * Generate root selector for a component/control.
 * 
 * @include comp('button') {}
 * 
 * .vd-button {}
 */
@mixin comp($component) {
  $C: class-comp($component) !global;

  .#{$C} {
    @content;
  }
}

/*----------  Property  ----------*/
@function class-prop($property, $value) {
  @return '#{$namespace}p-#{$property}_#{$value}';
}
/**
 * Generate selector for properties of a component/control.
 * 
 * @include comp('button') {
 *   @include prop(( skin: 'plain', theme: 'dark', )) {}
 * }
 * 
 * .vd-button.vdp-skin-plain.vdp-theme-dark {}
 * 
 * NOTE: The prop mixin is only for components, not for elements
 */
@mixin prop($property-map) {
  $props-selector: '';
  @each $property, $value in $property-map {
    $props-selector: '#{$props-selector}.#{class-prop($property, $value)}';
  }

  @at-root {
    .#{$C}#{$props-selector} {
      @content;
    }
  }
}

html {
  --vd-tone-primary-darkener: #0080b0;
  --vd-tone-primary-darken: #0098c2;
  --vd-tone-primary-standard: #00abd0;
  --vd-tone-primary-lighten: #00bedb;
  --vd-tone-primary-lightener: #34d2e9;

  --vd-tone-secondary-darkener: #0080b0;
  --vd-tone-secondary-darken: #0098c2;
  --vd-tone-secondary-standard: #00abd0;
  --vd-tone-secondary-lighten: #00bedb;
  --vd-tone-secondary-lightener: #34d2e9;

  --vd-tone-success-darkener: #1da63d;
  --vd-tone-success-darken: #21bd45;
  --vd-tone-success-standard: #24cf4c;
  --vd-tone-success-lighten: #2cdb55;
  --vd-tone-success-lightener: #46eb6d;

  --vd-tone-warning-darkener: #ffaa00;
  --vd-tone-warning-darken: #ffbb00;
  --vd-tone-warning-standard: #ffcc00;
  --vd-tone-warning-lighten: #ffdd33;
  --vd-tone-warning-darkener: #ffee44;

  --vd-tone-danger-darkener: #cc2828;
  --vd-tone-danger-darken: #e62d2d;
  --vd-tone-danger-standard: #ff3333;
  --vd-tone-danger-lighten: #ff4d4d;
  --vd-tone-danger-lightener: #ff6666;
}

// this map is at root
$tone-map: (
  primary-darkener: var(--vd-tone-primary-darkener),
  primary-darken: var(--vd-tone-primary-darken),
  primary-standard: var(--vd-tone-primary-standard),
  primary-lighten: var(--vd-tone-primary-lighten),
  primary-lightener: var(--vd-tone-primary-lightener),
  secondary-darkener: var(--vd-tone-secondary-darkener),
  secondary-darken: var(--vd-tone-secondary-darken),
  secondary-standard: var(--vd-tone-secondary-standard),
  secondary-lighten: var(--vd-tone-secondary-lighten),
  secondary-lightener: var(--vd-tone-secondary-lightener),
  success-darkener: var(--vd-tone-success-darkener),
  success-darken: var(--vd-tone-success-darken),
  success-standard: var(--vd-tone-success-standard),
  success-lighten: var(--vd-tone-success-lighten),
  success-lightener: var(--vd-tone-success-lightener),
  warning-darkener: var(--vd-tone-warning-darkener),
  warning-darken: var(--vd-tone-warning-darken),
  warning-standard: var(--vd-tone-warning-standard),
  warning-lighten: var(--vd-tone-warning-lighten),
  warning-lightener: var(--vd-tone-warning-lightener),
  danger-darkener: var(--vd-tone-danger-darkener),
  danger-darken: var(--vd-tone-danger-darken),
  danger-standard: var(--vd-tone-danger-standard),
  danger-lighten: var(--vd-tone-danger-lighten),
  danger-lightener: var(--vd-tone-danger-lightener)
);

@function tone($key) {
  @return map-get($tone-map, $key);
}

$enum-tone: 'primary', 'secondary', 'success', 'warning', 'danger';

@function bar-func($arg-map) {
  @return #fff;
}

@include comp('button') {
  // this map is in block
  $bar-map: (
    key1: 1,
    key-2: '2'
  );

  // NOTE that property name color is no highlighting.
  color: bar-func((key1: 1, key-2: '2'));
  background-color: #000;

  @each $tone in $enum-tone {
    @include prop((tone: $tone)) {
      color: bar-func((key1: 1, key-2: '2'));
      background-color: tone('#{$tone}-standard');
    }
  }

  // NOTE that property name color is highlighting.
  color: bar-func((key1: 1, key-2: '2'));
  background-color: #000;
}

还发现一些其他小问题，不知道是不是sass扩展本身的问题。

[fisheva]

可以试着描述下"其他小问题"?

[duduluu]

CSS属性名偶尔能高亮，大部分不高亮，看两个 // NOTE 另外代码我小改了一下。

[fisheva]

已修正, 更新下插件。有个小问题跟你说下

在将属性名设为红色时, 部分标点符号也变红了, 这是因为VSCode将这些标点符号和属性名混为一类了, 这属于VSCode字符识别的算法BUG;

同样还有143行这个color, 它被分配的Scope值也与其他的不一样

这样的颜色显示错误, 主题制作层面无法解决, 得等VSCode团队优化这部分算法。

[duduluu]

非常感谢！