sound_ai/src/styles/variables.scss

/* 全局 SCSS 变量 */

// 屏幕尺寸断点
$screen-xs: 480px;  // Extra small screen / phone
$screen-sm: 576px;  // Small screen / tablet
$screen-md: 768px;  // Medium screen / desktop
$screen-lg: 992px;  // Large screen / wide desktop
$screen-xl: 1200px; // Extra large screen / full hd
$screen-xxl: 1600px; // Extra extra large screen / large desktop

// 媒体查询混合宏
@mixin xs {
  @media (max-width: #{$screen-xs - 1px}) {
    @content;
  }
}

@mixin sm {
  @media (min-width: #{$screen-sm}) {
    @content;
  }
}

@mixin md {
  @media (min-width: #{$screen-md}) {
    @content;
  }
}

@mixin lg {
  @media (min-width: #{$screen-lg}) {
    @content;
  }
}

@mixin xl {
  @media (min-width: #{$screen-xl}) {
    @content;
  }
}

@mixin xxl {
  @media (min-width: #{$screen-xxl}) {
    @content;
  }
}

// 常用颜色变量
$primary-color: #646cff;
$primary-hover-color: #535bf2;
$text-color: rgba(255, 255, 255, 0.87);
$bg-color: #242424;
$light-text-color: #213547;
$light-bg-color: #ffffff;

// 字体设置
$font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
$font-size-base: 16px;
$line-height-base: 24px;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// 边框
$border-radius: 8px;
$border-color: transparent;

// 过渡
$transition-duration: 0.25s;