function.scss 2.0 KB

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