106 lines
3.1 KiB
SCSS
106 lines
3.1 KiB
SCSS
|
@use 'config';
|
|||
|
|
|
|||
|
|
// BEM support Func
|
|||
|
|
// 块（Block）：代表一个独立的组件或页面中的一个大型部分。块可以看作是一个命名空间，用于包含相关元素和修饰符。例如，一个导航栏可以被视为一个块。
|
|||
|
|
// 元素（Element）：代表块的一部分，但不能独立存在。元素总是属于一个块，并且与该块紧密相关。元素由块名称和元素名称组成，中间由双下划线（__）连接。例如，一个导航栏可以包含多个链接，链接可以被视为导航栏块的元素。
|
|||
|
|
// 修饰符（Modifier）：代表块或元素的变体或状态。修饰符用于修改块或元素的外观或行为。修饰符由块名称或元素名称，连字符（-）和修饰符名称组成。例如，一个导航栏可以具有活动状态或浅色主题，这些状态可以通过添加修饰符类进行实现。
|
|||
|
|
|
|||
|
|
@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')) => '--tn-button-text-color'
|
|||
|
|
@function joinVarName($list) {
|
|||
|
|
$name: '--' + config.$namespace;
|
|||
|
|
@each $item in $list {
|
|||
|
|
@if $item != '' {
|
|||
|
|
$name: $name + '-' + $item;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@return $name;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// getCssVarName('button', 'text-color') => '--tn-button-text-color'
|
|||
|
|
@function getCssVarName($args...) {
|
|||
|
|
@return joinVarName($args);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// getCssVar('button', 'text-color') => var(--tn-button-text-color)
|
|||
|
|
@function getCssVar($args...) {
|
|||
|
|
@return var(#{joinVarName($args)});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// getCssVarWithDefault('button', 'text-color', 'red') => var(--tn-button-text-color, red)
|
|||
|
|
@function getCssVarWithDefault($args, $default) {
|
|||
|
|
@return var(#{joinVarName($args)}, #{$default});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// bem('block', 'element', ''modifier) => 'tn-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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@return $name;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 字符串替换
|
|||
|
|
@function str-replace($string, $search, $replace) {
|
|||
|
|
$index: str-index($string, $search);
|
|||
|
|
|
|||
|
|
@if $index {
|
|||
|
|
@return str-slice($string, 1, $index - 1) + $replace +
|
|||
|
|
str-replace(
|
|||
|
|
str-slice($string, $index + str-length($search)),
|
|||
|
|
$search,
|
|||
|
|
$replace
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@return $string;
|
|||
|
|
}
|