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> 

  

•