使用 sass，如何设置“#div1 img, #div2 img { height: 80px }”的样式？

Question

使用sass，你的风格如何

#box1 img, #anotherbox img { height: 80px }

？使用mixins 是唯一的方法吗？

Answer 1

一种方法是像在 CSS 中那样列出选择器：但这不是 Sassy 的做法，因为这些元素不一定相互关联，那么为什么它们应该属于一起呢？他们只是碰巧有一些共同的风格。像这样将它们一起列出可以正常工作，但随着您添加更多内容，会稍微难以保持井井有条：

#box1 img, #anotherbox img
  height: 80px

如果您想对其进行概括，当然可以使用 mixin：

=shorty
  height: 80px

#box1 img, #anotherbox img
  +shorty

但这是同一回事：#box1 和#anotherbox 希望位于文件的不同部分。您需要它们共享一些共同的样式，但是将它们与它们所属的框规则组一起组织起来更有意义，因此您可以将它们分开：

=shorty
  height: 80px

#box1
  img
    +shorty

#anotherbox
  img
    +shorty

由于两次调用 mixin，它会在输出中创建重复：

#box1 img { height: 80px }
#anotherbox img { height: 80px }

当 mixin 中只有一些规则时，或者在有限数量的地方使用时，这是完全可以接受的。 （当 mixin 根据参数生成不同的样式规则时，mixin 真正发挥作用。）

好的，这就是使用 mixins 绕行的过程。

以下是使用 @extend 避免重复的方法：

@extend 的想法最初是由 Nicole Sullivan 在她的 CSS Wish List 博客文章中提出的。这似乎是个好主意，因此设计了当前纯 CSS 的实现，并在此后不久将其添加到 Sass。

如果您的样式规则描述的模式旨在用作通用类或许多其他项目的基本样式，则应考虑使用@extend。

为了理解区别，我们知道 mixin 会在每次调用时输出样式，但 extend 会创建一个使用该样式的所有选择器的列表，然后将它们附加到一个样式块：

.thumb-size
  height: 80px

#box1
  img
    @extend .thumb-size

#anotherbox
  img
    @extend .thumb-size

生产：

.thumb-size, #box1 img, #anotherbox img { height: 80px }

它会在输出中打印基本样式类 (.thumb-size)，即使您在其他任何事情上都不需要它。但是，我认为这还是更可取的，因为它定义了该选择器列表在其前面时的用途。