0

使用 sass，你的风格如何

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

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

4

1 回答 1

3

一种方法是像在 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)，即使您严格不需要它用于其他任何事情。但是，我认为无论如何这是更可取的，因为它定义了该选择器列表位于它们前面时的用途。

于 2010-06-20T02:45:10.810 回答