如何使用Stylus复用项目中的CSS样式逻辑-css教程-PHP中文网

stylus复用样式逻辑的核心是避免污染、控制作用域和提升可读性：须用带命名空间的mixin（如btn-primary）、设显式默认参数（flex-center($justify=center)），禁用!global和@extend，变量存常量，mixin封装可变逻辑，统一通过stylus-loader注入_variables和_mixins。

如何使用stylus复用项目中的css样式逻辑

Stylus 里复用样式逻辑，核心不是“怎么写 mixin”，而是“怎么避免污染、怎么控制作用域、怎么让别人能看懂你写的复用代码”。直接上结论：用带命名空间的 mixin + 显式参数默认值 + 避免 @extend，比堆砌 +reset() +clearfix() 更可持续。

Stylus 中 mixin 命名和参数设计的实际约束

Stylus 没有模块作用域，@import 是文本拼接，所以同一个名字的 mixin 被多次定义时，后导入的会静默覆盖前一个。这不是 bug，是机制决定的。

所有 mixin 必须带语义前缀，比如 btn-primary()、text-truncate()，而不是 primary() 或 truncate()
带参数的 mixin 一定要设默认值，例如 flex-center($justify = center, $align = center)，否则调用时漏传参数会编译失败
不要用 !global 声明 mixin——它解决不了跨文件复用问题，反而让覆盖行为更难追踪
避免在 mixin 里嵌套选择器（如 &:hover），除非你明确需要生成嵌套 CSS；多数场景下，把状态样式拆成独立规则更可控

变量与 mixin 的协作边界在哪

变量适合存静态常量（颜色、间距、断点），mixin 适合封装可变逻辑（弹性布局、渐变背景、响应式栅格）。混用时容易越界。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

别把本该是变量的值塞进 mixin 参数里，比如 spacing($size = $space-md) —— 这会让调用者困惑：到底该传数字还是变量名？
反过来，也别在 mixin 内部硬编码颜色值，比如 border 1px solid #007bff；应引用 $color-primary 这类已定义的变量
如果某个逻辑既要用变量又要用 mixin，优先提取为函数，例如：em($px) { return unit($px / 16, em) }，然后在 mixin 里调用

Webpack/Vite 项目中 stylus-loader 的关键配置项

构建工具不配对，mixin 再规范也白搭。尤其要注意压缩和作用域隔离。

stylusOptions: { compress: true } 必须开，否则嵌套 + 展开属性会让输出 CSS 体积翻倍
全局变量或 mixin 不要靠 @import 'base' 在每个文件顶部重复引入；推荐在 stylus-loader 的 additionalData 中注入统一入口，比如：@import '~@/styles/_variables.styl'; @import '~@/styles/_mixins.styl';
禁用 @extend：它会在每个使用处复制完整选择器链，CSS 体积增长不可控，且调试困难；用 mixin 替代
Vue 单文件组件中，<style lang="stylus"></style> 内写的 mixin 是局部作用域，不会污染全局，但也不能被其他组件复用——跨组件复用必须走外部 .styl 文件