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根据参数生成不同的样式规则时，Mixins真正自成一体。）

好的，这就是用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），即使您严格不需要它。但是，我认为无论如何这都是可取的，因为当它位于它们前面时，它定义了选择器列表的目的。