使用 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 才真正发挥作用。）

好的，这就是 mixin 的整个块之旅。

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

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

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

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

.thumb-size
  height: 80px

#box1
  img
    @extend .thumb-size

#anotherbox
  img
    @extend .thumb-size

生成：

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

它将打印基本样式类（.thumb-size）输出，即使您根本不需要它做其他任何事情。但是，我认为无论如何这都是更好的选择，因为它定义了选择器列表位于选择器前面时的用途。