如何用Mixin实现多语言字体大小适配（不修改HTML类）

首先，你的问题核心在于&在Sass嵌套中的行为：当你写.en &时，Sass会把&直接替换成当前的父选择器（也就是.Home .text），所以最终生成的是.en .Home .text——这是后代选择器，表示.en元素下的.Home元素下的.text，但你的需求是html标签同时拥有.Home和.en类，所以需要的是同元素多类选择器.en.Home .text。

修改Mixin的正确写法 #

你可以通过Sass的选择器插值（#{}）和@at-root指令来实现需求，让.en直接和&的最外层选择器合并：

@mixin font($size) {
  // 默认字号
  font-size: #{$size}px;
  
  // 针对.en语言的字号调整
  @at-root .en#{&} {
    font-size: #{$size - 5}px;
  }
}

// 调用Mixin的代码保持不变
.Home {
  .text {
    @include font(20);
  }
}

这段代码编译后会生成符合预期的CSS：

.Home .text {
  font-size: 20px;
}
.en.Home .text {
  font-size: 15px;
}

.en和.Home被合并成同一个元素的多类选择器，能正确匹配<html class='Home en'>下的.text元素。

为什么这个写法有效？ #

• #{&}会把当前的父选择器（.Home .text）直接插入到.en后面，形成.en.Home .text，而不是后代选择器结构。
• @at-root确保这个新选择器不会被嵌套在.Home .text内部，而是直接生成在根级别，避免了不必要的嵌套层级。

无需修改HTML的替代方案 #

如果不想调整Mixin，你也可以直接在.Home的嵌套结构中编写语言相关样式，同样能达到效果：

.Home {
  .text {
    font-size: 20px;
  }
  
  // 直接针对同时拥有.en类的Home元素
  &.en .text {
    font-size: 15px;
  }
}

这种写法更直观，不需要依赖Mixin，同样会生成.Home.en .text（和.en.Home .text选择器等价），完美匹配你的HTML结构。

内容的提问来源于stack exchange，提问作者user2504831