Mixin Extend 语法的区别

2026/07/03Scss 83 阅读

Mixin

用途:

使用Include将模块或混入(mixin)的功能添加到类中,而不涉及继承层次结构。

特点:

不改变类的祖先链:使用 include 添加的模块或混入不会成为类的父类或超类。

核心机制:

每次调用都将样式规则原样展开到调用处。支持‌传参‌、条件判断和循环,灵活性高 。

适用场景: 跨组件共享‌独立功能片段‌(如日志记录、表单验证、权限校验),避免重复代码 。 多重包含:一个类可以包含多个模块或混入,从而实现多种功能的组合。 常用于Ruby、JavaScript(通过mixins)、PHP等语言。

Extend

用途: 通常用于扩展现有类的方法集,而不是创建新的子类。它允许你为现有的类添加新的方法。

特点:

修改类的行为:通过 extend 扩展的类会立即获得新定义的方法,这些方法对类的所有实例都不可见,仅作为类方法存在。

核心机制:

将当前选择器追加到被继承类的选择器列表中,生成联合声明(如 .a, .b { ... })。‌不支持传参‌,仅静态匹配 。 适合场景: 构建‌组件基类‌(如基础弹窗、基础表格),通过继承派生特定业务组件,保持层级清晰 。

单例扩展:与 include 不同,extend 更像是为类本身增加功能,而不是为其实例。 常用于Ruby、Python等语言。

合并策略

两者均遵循“组件/子类优先”原则,同名属性直接覆盖。

选择建议‌

需参数定制(颜色、尺寸)用 ‌Mixin‌;纯静态样式归并用 ‌Extend‌,或混合使用(Mixin 生成基类,业务类 Extend 它) 。‌‌