sass 会损害性能吗？

Question

我一直在自学。阅读this：

引擎从右到左评估每个规则，从最右边的选择器（称为“键”）开始，遍历每个选择器，直到找到匹配项或丢弃规则。 （“选择器”是规则应该应用到的文档元素。）

例如：

ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...]

现在，一些示例代码 SASS 为我输出：

#content #blog {
  /* ... */
}
/* line 85, ../sass/screen.scss */
#content #flickr {
  /* ... */
}

#content #flickr div p {
  /* ... */
}

这似乎有点尴尬..我做错了什么吗？这是我和 Sass 之间的沟通问题吗？我们会失去它吗？

编辑： 一些 SCSS 代码：

#flickr {
    @include columns(5,8);
    background: url('../img/ipadbg.png') no-repeat;

    #ipod-gloss {
        z-index: 999;
        position: relative;
    }

    div {
        margin-top: -80px;
        margin-right: 20px;

        h2 {
            color: $white;
            font-size: 24px;
        }

        p {
            margin-top: 40px;
        }
    }
}

额外奖励！：文章说浏览器（或至少 Firefox）从右到左搜索选择器。我不明白为什么这是一个更有效的原因。有什么线索吗？

Answer 1

您必须在可维护性（嵌套使您更容易在样式表中找到自己的方式）和渲染性能之间找到折衷。

根据经验，您应该尝试将自己限制在三层嵌套中，如果没有必要，您应该避免嵌套 ID。

不过，我认为嵌套过多并不是最大的问题。当我意识到 mixins 的强大功能后，我就经常使用它们。

例如，这是我经常使用的按钮 mixin：

@mixin small-button($active-color: $active-color, $hover-color: $button-hover-color, $shadow: true)
  display: inline-block
  padding: 4px 10px
  margin:
    right: 10px
    bottom: 10px
  border: none
  background-color: $button-color
  color: $font-color-inv
  +sans-serif-font(9px, 700)
  text-align: center
  text-transform: uppercase
  cursor: pointer
  @if $shadow
    +light-shadow
  &:hover
    text-decoration: none
    background-color: $hover-color
  &:last-child
    margin-right: 0
  a
    color: $font-color-inv
    &, &:hover
      text-decoration: none
  &.disabled
    +opacity(0.75)
    &:hover
      background-color: $button-color
  &.active
    background-color: $active-color
    &.disabled:hover
      background-color: $active-color

你看，相当多的代码。将这样的 mixin 应用到页面上的许多元素会导致一个大的 CSS 文件，需要更长的时间来解释。

在老式的 CSS 方式中，您将赋予每个按钮元素，例如.small-button 类。但是这种方法会用无语义的类污染你的标记。

Sass 提供了一个解决方案：通过@extend directive 继承选择器。

如果您为 mixin 的参数设置默认值，您还可以提供一个简单的类，该类将 mixin 与您的默认值一起使用：

// Use this mixin via @extend if you are fine with the parameter defaults
.small-button
  +small-button

然后您可以在各种上下文中从此类继承：

#admin-interface
  input[type=submit]
    @extend .small-button

生成的 CSS 语句将 .small 按钮的所有用法聚合到一个带有逗号分隔选择器的规则中：

.small-button, #admin-interface input[type=submit] {
  display: inline-block;
  ...
}

最后，简单地使用 Sass 会影响您的 CSS 性能。然而，如果使用得当，它是可维护的，这要归功于结构良好且 DRY 的代码，它可以正确分离标记和样式（仅限语义类），并允许编写智能和高性能的 CSS 代码。

Answer 2

SASS 只是一种编译成 CSS 的语言。如果您担心 SASS 在浏览器中的运行性能，那么 SASS 不会参与进来——它将被编译并作为常规 CSS 提供给浏览器。

---

根据您对 SASS 的使用情况，我可以提出以下几点建议：

1. 您没有必须嵌套所有内容。

在 SASS 中相互嵌套规则的能力是一种语言特性，但如果这样做没有意义，则不必这样做。

---

就您的一般 CSS 用法而言：

1. 如果嵌套过于严重/笨拙，请考虑在合理的情况下使用类。
2. 当需要使用 DOM 元素的层次结构时，请考虑使用 [child 组合器]：.foo > .bar。

ID 是唯一的，因此应该始终只引用单个元素。大多数时候，它们本身可以是 CSS 规则——例如，#content #flickr 会变成 #flickr，并且浏览器会优化单个 ID 的查找。唯一需要#id1 #id2 之类的内容的情况是#id2 需要出现在不同页面的不同上下文中。

如果您的选择器包含#id div p 之类的内容，那么div 要么是多余的，要么是为了特定目的。

• 如果是多余的，请将规则更改为 #id p，这将选择作为 #id 的后代出现的任何 <p>。
• 如果它用于特定用途，请考虑使用描述其用途的类名对<div> 进行分类——也许是<div class="photos-list">。然后你的 CSS 可以变成.photos-list p，这样更易​​于维护和重用。

---