sass实现js
SASS 与 JavaScript 交互的实现方法
SASS（Syntactically Awesome Style Sheets）本身是 CSS 预处理器，不直接支持 JavaScript 的动态特性，但可以通过以下方式实现间接交互或动态样式控制。
使用 CSS 自定义属性（CSS Variables）
CSS 自定义属性可以在运行时通过 JavaScript 动态修改，SASS 可以编译生成这些变量。
// SASS 中定义变量
:root {
--primary-color: #{$primary-color}; // SASS 变量通过插值转为 CSS 变量
}
.element {
color: var(--primary-color); // 通过 CSS 变量引用
}// JavaScript 动态修改
document.documentElement.style.setProperty('--primary-color', 'blue');通过类名或属性控制样式
SASS 可以生成基于类名或 HTML 属性的样式规则，JavaScript 通过操作 DOM 类名或属性触发样式变化。
// SASS 生成样式
.button {
background: red;
&.--active {
background: green;
}
}// JavaScript 切换类名
document.querySelector('.button').classList.add('--active');使用 :has() 伪类实现父子联动
通过 JavaScript 修改子元素状态，父元素样式通过 :has() 伪类响应。
.parent {
border: 1px solid gray;
&:has(.child--active) {
border-color: red;
}
}// JavaScript 激活子元素
document.querySelector('.child').classList.add('child--active');预处理数据生成静态样式
对于需要复杂计算的样式，可以在 SASS 编译前通过 JavaScript 生成数据文件，再通过 @import 引入。
// generate-styles.js
const colors = { primary: '#ff0000' };
fs.writeFileSync('_colors.scss', `$primary: ${colors.primary};`);// styles.scss
@import 'colors';
.button {
background: $primary;
}动态类名与 SASS 循环结合
通过 JavaScript 生成动态类名，SASS 通过循环预生成所有可能的样式组合。
// 预生成尺寸类
@each $size in small, medium, large {
.text-#{$size} {
font-size: calc(12px * index((small:1, medium:1.5, large:2), $size));
}
}// 动态应用类名
element.className = `text-${userSelectedSize}`;注意事项
- SASS 变量仅在编译时有效，无法在运行时直接通过 JavaScript 修改。
- 复杂动态逻辑需依赖 CSS 原生功能（如 Custom Properties）或 DOM 操作。
- 避免过度依赖预生成样式，可能导致 CSS 文件体积过大。
通过以上方法，可以实现 SASS 与 JavaScript 的协同工作，平衡静态预处理和运行时动态控制的需求。
