Closed duduluu closed 6 years ago
@duduluu 可以把您这个Sass文件里的代码全部粘贴一份给我吗? 因为我调试的时候需要案例代码, 谢谢!
$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扩展本身的问题。
可以试着描述下"其他小问题"?
CSS属性名偶尔能高亮,大部分不高亮,看两个 // NOTE 另外代码我小改了一下。
已修正, 更新下插件。有个小问题跟你说下
在将属性名设为红色时, 部分标点符号也变红了, 这是因为VSCode将这些标点符号和属性名混为一类了, 这属于VSCode字符识别的算法BUG;
同样还有143行这个color, 它被分配的Scope值也与其他的不一样
这样的颜色显示错误, 主题制作层面无法解决, 得等VSCode团队优化这部分算法。
非常感谢!
根部时map的key是黑色,在代码块中时key是灰色,不够显眼。
希望能改成 js 对象那样,属性名是红色高亮 :)