iee init

wujingjing

2025-02-12 9b3c556251698578e0f43e4d4d82f72d22a757bd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
@use 'config';
@use 'sass:meta';
@use 'sass:string';
 
// BEM support Func
@function selectorToString($selector) {
  $selector: meta.inspect($selector);
  $selector: string.slice($selector, 2, -2);
  @return $selector;
}
 
@function containsModifier($selector) {
  $selector: selectorToString($selector);
 
  @if string.index($selector, config.$modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}
 
@function containWhenFlag($selector) {
  $selector: selectorToString($selector);
 
  @if string.index($selector, '.' + config.$state-prefix) {
    @return true;
  } @else {
    @return false;
  }
}
 
@function containPseudoClass($selector) {
  $selector: selectorToString($selector);
 
  @if string.index($selector, ':') {
    @return true;
  } @else {
    @return false;
  }
}
 
@function hitAllSpecialNestRule($selector) {
  @return containsModifier($selector) or containWhenFlag($selector) or
    containPseudoClass($selector);
}
 
// join var name
// joinVarName(('button', 'text-color')) => '--el-button-text-color'
@function joinVarName($list) {
  $name: '--' + config.$namespace;
  @each $item in $list {
    @if $item != '' {
      $name: $name + '-' + $item;
    }
  }
  @return $name;
}
 
// getCssVarName('button', 'text-color') => '--el-button-text-color'
@function getCssVarName($args...) {
  @return joinVarName($args);
}
 
// getCssVar('button', 'text-color') => var(--el-button-text-color)
@function getCssVar($args...) {
  @return var(#{joinVarName($args)});
}
 
// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
@function getCssVarWithDefault($args, $default) {
  @return var(#{joinVarName($args)}, #{$default});
}
 
// bem('block', 'element', 'modifier') => 'el-block__element--modifier'
@function bem($block, $element: '', $modifier: '') {
  $name: config.$namespace + config.$common-separator + $block;
 
  @if $element != '' {
    $name: $name + config.$element-separator + $element;
  }
 
  @if $modifier != '' {
    $name: $name + config.$modifier-separator + $modifier;
  }
 
  // @debug $name;
  @return $name;
}