css 里面写if else 条件判断

• 定义时使用 @mixin name(params) 声明

• 调用时通过 @include name(args) 引入样式

• mixins.scss文件中：

  @import './variables.scss';
  
  // 弹性布局
  @mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify;
    align-items: $align;
    flex-wrap: $wrap;
  }
  
  // 居中对齐
  @mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  // 两端对齐
  @mixin flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  // 文本截断
  @mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  // 多行文本截断
  @mixin text-truncate-multiline($lines: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
  
  // 响应式布局
  @mixin responsive($breakpoint) {
    @if $breakpoint == sm {
      @media (min-width: $breakpoint-sm) { @content; }
    } @else if $breakpoint == md {
      @media (min-width: $breakpoint-md) { @content; }
    } @else if $breakpoint == lg {
      @media (min-width: $breakpoint-lg) { @content; }
    } @else if $breakpoint == xl {
      @media (min-width: $breakpoint-xl) { @content; }
    }
  }
  
  // 状态颜色
  @mixin status-color($status) {
    @if $status == 'normal' or $status == '正常' {
      background-color: $color-success;
      color: $color-white;
    } @else if $status == 'warning' or $status == '警告' {
      background-color: $color-warning;
      color: $color-dark;
    } @else if $status == 'error' or $status == '异常' {
      background-color: $color-danger;
      color: $color-white;
    } @else {
      background-color: $color-secondary;
      color: $color-white;
    }
  } 

  引用的vue文件：

  <template>
    <div class="switch-node">
      <!-- 交换机图标和名称 -->
      <div class="d-flex align-items-center mb-2">
        <div class="switch-node__icon">
          <svg class="switch-node__icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
          </svg>
        </div>
        <div class="switch-node__content">
          <p class="switch-node__title" :title="nodeData.label">
            {{ nodeData.label }}
          </p>
          <p class="switch-node__subtitle">
            {{ nodeData.district }}
          </p>
        </div>
      </div>
      
      <!-- 状态指示器 -->
      <div class="switch-node__footer">
        <span>状态:</span>
        <span class="switch-node__status" :class="statusClass">
          <span class="switch-node__status-indicator"></span>
          {{ nodeData.status }}
        </span>
      </div>
      
      <!-- 设备计数指示器 -->
      <div class="switch-node__devices">
        设备: {{ nodeData.devices ? nodeData.devices.length : 0 }}
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SwitchNode',
    props: {
      nodeData: {
        type: Object,
        required: true
      }
    },
    computed: {
      statusClass() {
        switch(this.nodeData.status) {
          case '正常': return 'status-normal';
          case '警告': return 'status-warning';
          case '异常': return 'status-error';
          default: return '';
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import '@/assets/styles/variables.scss';
  @import '@/assets/styles/mixins.scss';
  
  .status-normal {
    @include status-color('正常');
  }
  
  .status-warning {
    @include status-color('警告');
  }
  
  .status-error {
    @include status-color('异常');
  }
  </style> 

  

•