Question

我一直在教育自己。阅读this：

引擎从右到左评估每个规则，从最右边的选择器（称为“密钥”）开始并移动每个选择器，直到找到匹配或丢弃规则。（“selector”是规则应适用的文档元素。）

例如：

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;
        }
    }
}

Side Bonus！：文章说浏览器（或至少是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的参数设置默认值，你也可以提供一个简单的类，它使用默认的mixins：

// 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的使用情况来看，我可以提出一些建议：

你没有拥有来嵌套一切。

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

就您的一般CSS用法而言：

如果嵌套变得太严重/不合适，请考虑使用有意义的类。
当需要使用DOM元素的层次结构时，请考虑使用[child combinator]：.foo > .bar。

ID应该是唯一的，因此应始终仅引用单个元素。大多数情况下，它们可以是自己的CSS规则 - 例如#content #flickr只会变成#flickr - 并且浏览器会优化单个ID的查找。您需要#id1 #id2之类的唯一时间是#id2是否需要在不同页面的不同上下文中显示。

如果您的选择器包含#id div p之类的内容，则div可能是多余的，也可能是特定目的。

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

sass会损害性能吗？

2 个答案: