function.scss 2.0 KB

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