提高CSS 开发效率：:root 全局变量 + Sass

/* 全局CSS变量定义 - :root */
:root {
  /* 主色调/辅助色/中性色，按项目需求加 */
  --color-primary: #4285F4; /* 主蓝 */
  --color-secondary: #FFC107; /* 辅助黄 */
  --color-success: #34A853; /* 成功绿 */
  --color-danger: #EA4335; /* 危险红 */
  --color-text-1: #333333; /* 主文本 */
  --color-text-2: #666666; /* 次文本 */
  --color-text-3: #999999; /* 淡文本 */
  --color-bg: #F5F7FA; /* 页面背景 */
  --color-card: #FFFFFF; /* 卡片背景 */

  /* 字体大小，适配不同场景 */
  --font-size-xl: 24px;
  --font-size-lg: 18px;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  /* 间距，统一用gap-前缀，按4px/8px递进，方便记忆 */
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-16: 16px;
  --gap-24: 24px;
  --gap-32: 32px;

  /* 圆角，适配按钮/卡片/输入框 */
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-lg: 12px;
  --radius-circle: 50%;

  /* 阴影，轻/中/重三种，满足大部分场景 */
  --shadow-light: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-base: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-heavy: 0 8px 24px rgba(0,0,0,0.12);
}

/* 全局使用示例，随便写个按钮/卡片 */
.btn-primary {
  padding: var(--gap-8) var(--gap-16);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-light);
}
.card {
  padding: var(--gap-24);
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  color: var(--color-text-1);
}

/* 局部覆盖：个人中心模块的主色和全局不一样，单独定义 */
.user-center {
  --color-primary: #7B68EE;
}
/* 这里的按钮会用#7B68EE，而不是全局的#4285F4 */
.user-center .btn-primary {
  background: var(--color-primary);
}

/* 响应式：移动端缩小字体和间距 */
@media (max-width: 768px) {
  :root {
    --font-size-xl: 20px;
    --font-size-lg: 16px;
    --gap-24: 16px;
    --gap-32: 24px;
  }
}

// 切换深色模式，修改全局背景和文本色
document.documentElement.style.setProperty('--color-bg', '#1F1F1F');
document.documentElement.style.setProperty('--color-text-1', '#FFFFFF');

// _variables.scss - Sass全局变量
// 颜色变量
$color-primary: #4285F4;
$color-secondary: #FFC107;
$color-text-1: #333;
$color-text-2: #666;
// 间距变量
$gap-4: 4px;
$gap-8: 8px;
$gap-16: 16px;
$gap-24: 24px;
// 字体大小
$font-size-base: 16px;
$font-size-lg: $font-size-base + 2px; // 直接运算，不用calc
// 圆角
$radius-base: 8px;

// SCSS嵌套写法
.nav {
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);

  // 嵌套子选择器，不用重复写.nav
  .nav-item {
    float: left;
    margin-right: $gap-24; // 用Sass变量

    // &表示父选择器.nav-item，写hover超方便
    &:hover {
      color: $color-primary;
    }

    // 嵌套孙选择器
    .nav-link {
      display: block;
      padding: $gap-8 0;
      font-size: $font-size-base;
    }
  }

  // 伪元素也能嵌套
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

// 编译后的原生CSS（自动生成，不用自己写）
.nav {
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.nav .nav-item {
  float: left;
  margin-right: 24px;
}
.nav .nav-item:hover {
  color: #4285F4;
}
.nav .nav-item .nav-link {
  display: block;
  padding: 8px 0;
  font-size: 16px;
}
.nav::after {
  content: "";
  display: block;
  clear: both;
}

// _mixins.scss - 常用混合器
// flex水平垂直居中（无参数，基础复用）
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 毛玻璃效果（带参数，默认值8px，可自定义）
@mixin glass($blur: 8px) {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur($blur);
  -webkit-backdrop-filter: blur($blur);
  border: 1px solid rgba(255,255,255,0.9);
}

// 渐变文字（带两个颜色参数，必传）
@mixin gradient-text($color1, $color2) {
  background-image: linear-gradient(135deg, $color1, $color2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

// 引入混合器使用
.card {
  @include flex-center; // 用无参数混合器
  width: 300px;
  height: 200px;
  @include glass(10px); // 传参，模糊值10px
}
.title {
  font-size: 24px;
  font-weight: 700;
  @include gradient-text($color-primary, $color-secondary); // 传颜色变量
}

// Sass运算
$width: 300px;
$gap: 20px;

.box1 {
  width: $width - 50px; // 250px
  height: $width / 2; // 150px
}
// 多列布局，自动计算宽度，不用手动算
.box2 {
  width: (100% - $gap * 2) / 3; // 平均分成3列，间距20px
}

// 编译后的CSS
.box1 {
  width: 250px;
  height: 150px;
}
.box2 {
  width: calc(100% - 40px) / 3;
}

// 基础按钮样式
.btn {
  padding: $gap-8 $gap-16;
  border-radius: $radius-base;
  cursor: pointer;
  border: none;
  font-size: $font-size-base;
}
// 主按钮继承基础样式，加特殊样式
.btn-primary {
  @extend .btn;
  background: $color-primary;
  color: #fff;
}
// 次要按钮继承基础样式
.btn-secondary {
  @extend .btn;
  background: #eee;
  color: $color-text-1;
}

// main.scss - 主样式文件，引入所有公共文件
@import "./variables";
@import "./mixins";
@import "./global";
// 然后写页面样式
@import "./pages/index";
@import "./pages/detail";

// _variables.scss - 先定义Sass变量
$color-primary: #4285F4;
$color-secondary: #FFC107;
$color-bg: #F5F7FA;
$gap-16: 16px;
$font-size-base: 16px;

// global.scss - 用Sass变量定义CSS全局变量
@import "./variables";
:root {
  // 用#{}插值，把Sass变量注入到CSS变量中
  --color-primary: #{$color-primary};
  --color-secondary: #{$color-secondary};
  --color-bg: #{$color-bg};
  --gap-16: #{$gap-16};
  --font-size-base: #{$font-size-base};
  // 其他变量同理
}