sass会损害性能吗？

Question

我一直在教育自己.读这个:

引擎从右到左评估每个规则,从最右边的选择器(称为"密钥")开始并移动每个选择器直到找到匹配或丢弃规则.("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;
        }
    }
}

边奖金!:文章说浏览器(或至少是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指令进行选择器继承.

如果为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的使用情况来看,我可以提出一些建议:

1. 你不必有窝的一切.

在SASS中将规则嵌套在彼此之内的能力是一种语言特性,但如果没有意义,则不必这样做.

就您的一般CSS用法而言:

1. 如果嵌套变得太严重/不合适,请考虑使用有意义的类.
2. 当需要使用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">.那么你的CSS可能会变得.photos-list p更加可维护和可重用.