naive-ui/styles/mixins/mixins.scss

@import 'config.scss';
@import '../themes/dark/index.scss';
@import '../themes/light/index.scss';
@import '../themes/common.scss';
@import '../themes/transition.scss';

/**
 * BEM related mixins
 */
$B: null;
$BE: null;
$block-depth: 0;

@function block ($block: null) {
  @if $block {
    @return $namespace + '-' + $block;
  } @else if $B {
    @return $B;
  }
}

@mixin b($block) {
  $block-depth: $block-depth + 1 !global;
  $temp-block: $B;
  $temp-block-element: $BE;
  $B: $namespace + '-' + $block !global;
  $BE: $B!global;
  @if (not $common-css-attrs-generated) or $block-depth != 1 {
    .#{$B} {
      @content;
    }
  } @else {
    .#{$namespace}-#{$theme}-theme.#{$B} {
      @content
    }
  }
  $B: $temp-block !global;
  $BE: $temp-block-element !global;
  $block-depth: $block-depth - 1 !global;
}

@mixin e($elements...) {
  $temp-block-element: $BE;
  $BEs: '';
  @each $element in $elements {
    $BE: $B + $element-separator + $element !global;
    .#{$BE} {
      @content;
    }
  }
  $BE: $temp-block-element !global;
}

@mixin m($modifiers...) {
  $BEMs: '';
  @for $i from 0 to length($modifiers) {
    $modifier: nth($modifiers, $i + 1);
    @if $i == 0 {
      $BEMs: '&.' + $BE + $modifier-separator + $modifier;
    } @else {
      $BEMs: $BEMs + ', &.' + $BE + $modifier-separator + $modifier;
    }
  }
  #{$BEMs} {
    @content;
  }
}

@mixin not-m($modifier) {
  $BEM: '';
  $BEM: '.' + $BE + $modifier-separator + $modifier;
  &:not(#{$BEM}) {
    @content;
  }
}

/**
 * Theme related mixins
 */
$common-css-attrs-generated: false;
$theme: null;
$in-themes-mixin: false;
$theme-names: 'dark', 'light';
/** wait for sass to support dynamic @include mixins */
$default-theme: 'light';

@mixin themes-mixin() {
  $in-themes-mixin: true !global;
  $theme: 'light' !global;
  @include setup-light-theme();
  @content;
  $common-css-attrs-generated: true !global;
  @each $theme-name in $theme-names {
    @if $theme-name == 'light' {
      $theme: $theme-name !global;
      @include setup-light-theme();
      @content;
      $theme: null !global;
    } @else if $theme-name == 'dark' {
      $theme: $theme-name !global;
      @include setup-dark-theme();
      @content;
      $theme: null !global;
    }
  }
  $common-css-attrs-generated: false !global;
  $in-themes-mixin: false !global;
  $theme: null !global;
}

@mixin as-form-item {
  &.#{$namespace}-form-item {
    .#{$namespace}-form-item-blank {
      @content;
    }
  }
}

@mixin with-status ($status) {
  &.#{$namespace}-form-item-blank#{$modifier-separator}#{$status} {
    @content;
  }
}

@mixin as-modal-content {
  &.#{$namespace}-modal-content, &.#{$namespace}-drawer {
    @content;
  }
}

@mixin once() {
  @if not $common-css-attrs-generated {
    @content;
  }
}