1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- @use 'config';
- // BEM support Func
- @function selectorToString($selector) {
- $selector: inspect($selector);
- $selector: str-slice($selector, 2, -2);
- @return $selector;
- }
- @function containsModifier($selector) {
- $selector: selectorToString($selector);
- @if str-index($selector, config.$modifier-separator) {
- @return true;
- } @else {
- @return false;
- }
- }
- @function containWhenFlag($selector) {
- $selector: selectorToString($selector);
- @if str-index($selector, '.' + config.$state-prefix) {
- @return true;
- } @else {
- @return false;
- }
- }
- @function containPseudoClass($selector) {
- $selector: selectorToString($selector);
- @if str-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;
- }
|