naive-ui/styles/mixins/mixins.scss

@import "config.scss";
@import "../themes/vars.scss";
@import "../themes/dark/index.scss";
@import "../themes/light/index.scss";
@import "../themes/commonVars.scss";

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

@function block ($block) {
  @return $namespace + "-" + $block;
}

@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 {
    .n-#{$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;
  &:not(#{$BEM}) {
    @content;
  }
}

/**
 * Theme related mixins
 */
$common-css-attrs-generated: false;
$theme: null;
$in-themes-mixin: false;
$theme-names: "dark", "light";

@mixin themes-mixin() {
  $in-themes-mixin: true !global;
  $theme: 'dark' !global;
  @include setup-dark-theme();
  @content;
  $common-css-attrs-generated: true !global;
  @each $theme-name in $theme-names {
    @if $theme-name == 'light' {
      $theme: $theme-name !global;
      @include setup-dark-theme();
      @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 {
  .n-form-item {
    .n-form-item-blank {
      @content;
    }
  }
}

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

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

@mixin detachedContentWrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
}

@mixin detachedContent {
  position: fixed;
}