7e49d6d1e77ff4ba57e773b166fbc7db1d008d7c1a7b32fc38d81e712c88ba414a71e80ef472ea6de89ae8e0060068932133bab35f11b53db1ca0e45448a2c 2.3 KB

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