11、CSS高级应用：从SCSS到React组件的样式管理

CSS高级应用：从SCSS到React组件的样式管理

1. SCSS Ampersands的使用

在嵌套的CSS定义中， & 前缀用于引用父级CSS类。例如，当我们希望样式应用于同时具有 resized 和 shrink 类的元素时，使用 & 可以实现这一效果。若不使用 & ，样式会应用于嵌套的DOM元素，即外层元素有 resized 类，内层元素有 shrink 类的情况。

为了实现这一功能，我们需要对 app/views/favorites/_list.html.erb 视图进行两处小修改：
- 为 elementToChange 目标元素添加 resizer 类。
- 将 data-css-css-class 从 hidden 改为 shrink 。

虽然切换控制器不变，但现在它会在目标元素上添加和移除 shrink 类，而非 hidden 类。这一修改无需编写新的JavaScript代码。

不过，由于 max-height 通常比大多数元素都大，当列表较小时，可能会出现延迟（因为收缩高度值需要更长时间才能超过文本高度）。此外，如果一天的音