【uni-app】JS动态修改scss样式变量

'# 【uni-app】JS动态修改scss样式变量

一、背景与问题

在uni-app开发中，我们常常需要根据用户行为或系统状态动态调整UI样式。传统做法是通过JS直接操作DOM的style属性，但这种方式存在诸多局限：

1. 需要维护大量冗余的样式代码
2. 缺乏样式复用机制
3. 无法实现全局样式统一控制
4. 在复杂组件中难以维护

SCSS作为CSS预处理器，提供了变量、嵌套、混入等强大功能，但其变量在编译时就已经确定，无法在运行时动态修改。这导致在需要动态样式调整的场景中，开发者往往陷入两难。

二、基本原理

在uni-app中实现动态修改SCSS变量的核心原理是：利用CSS变量（Custom Properties）的运行时可变性，结合SCSS的预处理能力，构建可动态修改的样式系统。

SCSS变量在编译时会被转换为CSS变量，而CSS变量在运行时可以通过JavaScript动态修改。这种混合使用SCSS变量和CSS变量的方式，既保留了SCSS的可维护性，又实现了动态控制。

三、环境准备

在开始前需要准备以下环境：

1. uni-app项目结构（使用Vue3）
2. 安装依赖：npm install sass

3. 配置vue.config.js支持SCSS：

   module.exports = {
     css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/variables.scss";` // 全局SCSS变量文件
      }
    }
     }
   }

四、核心实现

1. SCSS变量定义（variables.scss）

// 定义CSS变量
:root {
  --primary-color: #007AFF;
  --secondary-color: #FF4081;
  --text-color: #333;
}

2. 在组件中使用CSS变量

/* component.scss */
.container {
  background-color: var(--primary-color);
  color: var(--text-color);
}

3. JS动态修改CSS变量

// 修改变量值
function updateTheme(color) {
  document.documentElement.style.setProperty('--primary-color', color);
}

4. 完整代码示例

<template>
  <view class="container">
    <text>当前主题色：{{ currentColor }}</text>
    <button @click="toggleTheme">切换主题</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentColor: '#007AFF'
    };
  },
  methods: {
    toggleTheme() {
      const newColor = this.currentColor === '#007AFF' ? '#FF4081' : '#007AFF';
      this.currentColor = newColor;
      document.documentElement.style.setProperty('--primary-color', newColor);
    }
  }
};
</script>

五、完整案例：动态主题切换系统

1. 项目结构

src/
├── assets/
│   └── variables.scss
├── components/
│   └── ThemeSwitcher.vue
├── pages/
│   └── index.vue
└── App.vue

2. 全局SCSS变量（assets/variables.scss）

:root {
  --primary-color: #007AFF;
  --secondary-color: #FF4081;
  --text-color: #333;
}

3. 组件样式（components/ThemeSwitcher.vue）

<template>
  <view class="theme-switcher">
    <text>当前主题：{{ theme }}</text>
    <button @click="toggleTheme">切换主题</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light'
    };
  },
  methods: {
    toggleTheme() {
      const newTheme = this.theme === 'light' ? 'dark' : 'light';
      this.theme = newTheme;
      
      if (newTheme === 'dark') {
        document.documentElement.style.setProperty('--primary-color', '#FF4081');
        document.documentElement.style.setProperty('--text-color', '#fff');
      } else {
        document.documentElement.style.setProperty('--primary-color', '#007AFF');
        document.documentElement.style.setProperty('--text-color', '#333');
      }
    }
  }
};
</script>

<style>
.theme-switcher {
  padding: 20px;
  background-color: var(--secondary-color);
  color: var(--text-color);
}
</style>

4. 页面使用（pages/index.vue）

<template>
  <view>
    <ThemeSwitcher />
    <view class="main-content">
      <text>动态样式示例</text>
    </view>
  </view>
</template>

<script>
import ThemeSwitcher from '@/components/ThemeSwitcher.vue';

export default {
  components: {
    ThemeSwitcher
  }
};
</script>

<style>
.main-content {
  padding: 20px;
  background-color: var(--primary-color);
  color: var(--text-color);
}
</style>

六、源码解析

1. SCSS变量编译：

   • 在编译过程中，SCSS的@import会将variables.scss中的变量注入到document.documentElement的style中
   • :root选择器确保变量在全局作用域生效

2. 动态修改机制：

   • document.documentElement.style.setProperty()会直接修改根元素的CSS变量
   • 所有使用var(--variable-name)的样式会自动更新

3. 响应式更新：

   • Vue的响应式系统会自动触发视图更新
   • 需要确保样式中的变量引用是var(--variable-name)格式

七、进阶使用

1. 动态类名结合CSS变量

<view :class="{'dark-theme': isDark}">
  <!-- 内容 -->
</view>

.dark-theme {
  --primary-color: #FF4081;
  --text-color: #fff;
}

2. 动态样式绑定

<view :style="{ backgroundColor: `var(--primary-color)` }">
  <!-- 内容 -->
</view>

3. 多级变量控制

:root {
  --base-color: #007AFF;
  --primary-color: var(--base-color);
  --secondary-color: #FF4081;
}

4. 响应式变量控制

function updateResponsiveVariables(width) {
  if (width < 768) {
    document.documentElement.style.setProperty('--primary-color', '#FF4081');
  } else {
    document.documentElement.style.setProperty('--primary-color', '#007AFF');
  }
}

八、性能与工程实践

1. 性能优化

1. 避免频繁更新：

   let isUpdating = false;
   function updateTheme(color) {
     if (isUpdating) return;
     isUpdating = true;
     requestAnimationFrame(() => {
       document.documentElement.style.setProperty('--primary-color', color);
       isUpdating = false;
     });
   }

2. 批量更新：

   function updateMultipleVariables(vars) {
     Object.entries(vars).forEach(([key, value]) => {
       document.documentElement.style.setProperty(key, value);
     });
   }

2. 异常处理

try {
  document.documentElement.style.setProperty('--invalid-var', 'red');
} catch (e) {
  console.error('无效的CSS变量:', e);
}

3. 安全考虑

• XSS防护：避免直接拼接用户输入作为变量值
• 变量校验：对关键变量进行类型和范围校验
• 最小权限：限制对关键变量的修改权限

九、常见问题与踩坑

1. 常见错误

2. 环境差异

3. 常见陷阱

• SCSS变量未正确注入：确保@import路径正确
• 变量作用域问题：document.documentElement是根元素
• 样式覆盖问题：注意CSS层叠顺序
• 移动端适配：需考虑不同设备的像素比

十、最佳实践

1. 标准化命名规范

:root {
  --base: #007AFF;
  --primary: var(--base);
  --secondary: #FF4081;
  --text: #333;
}

2. 模块化管理

// colors.scss
:root {
  --primary: #007AFF;
  --secondary: #FF4081;
}

// typography.scss
:root {
  --font-size: 16px;
  --line-height: 1.5;
}

3. 动态控制策略

// 主题管理器
export default {
  currentTheme: 'light',
  updateTheme(theme) {
    this.currentTheme = theme;
    if (theme === 'dark') {
      this.setVariables({
        '--primary': '#FF4081',
        '--text': '#fff'
      });
    } else {
      this.setVariables({
        '--primary': '#007AFF',
        '--text': '#333'
      });
    }
  },
  setVariables(vars) {
    Object.entries(vars).forEach(([key, value]) => {
      document.documentElement.style.setProperty(key, value);
    });
  }
};

十一、总结

在uni-app中动态修改SCSS样式变量需要结合CSS变量的运行时特性，通过SCSS预处理构建可维护的样式系统。这种方案在需要动态样式控制的场景中具有显著优势，但需要注意以下几点：

• 适用场景：主题切换、动态样式控制、多环境样式适配
• 不适用场景：样式固定不变的普通页面
• 注意事项：确保变量正确注入，注意跨平台兼容性，避免频繁更新
• 性能优化：使用防抖/节流，批量更新变量，避免不必要的重排

通过合理的设计和实践，我们可以构建出既灵活又可维护的动态样式系统，提升uni-app项目的可维护性和用户体验。