sass是否会损害性能？ [英] Does sass harm performance?

问题描述

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

引擎从右到左计算每个规则，从最右边的选择器（称为键）开始，并移动每个选择器，直到找到匹配或丢弃规则。 （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）从右到左搜索选择器。我不明白为什么这是更有效的原因。任何线索？

解决方案

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

一个经验法则是，你应该尽量限制自己进行三级嵌套，如果没有必要，你应该避免嵌套ID。 p>

但是，我认为嵌套太多不是最大的问题。一旦我意识到mixins的力量，我就用了很多。

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

  @mixin小按钮（$ 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按钮。

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

如果您为mixin的参数设置默认值，提供一个简单的类，它使用默认的mixins：

  //通过@extend使用这个mixin如果你很好参数默认值
 .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代码。

I've been educating myself. Reading this:

The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)

For example:

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

Now, some example code SASS outputs for me:

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

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

This seems a bit awkward.. am I doing something wrong? Is this a communication problem between me and Sass? Are we losing it?

Edit: Some SCSS code:

#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!: The article says browsers (or at least Firefox) search the selectors from right to left. I couldn't understand why this is a more efficient why. Any clues?

解决方案

You have to find your compromise between maintainability (nesting makes it easier to find your way around in the stylesheet) and rendering performance.

A rule of thumb says you should try to restrict yourself to a three-level nesting and you should avoid to nest IDs if it's not necessary.

However, I think nesting too much is not the biggest issue. As soon as I became aware of the power of mixins, I used them a lot.

For example, this is my often used button 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

You see, quite a bit code. Applying such mixins to many elements on your page will result in a big CSS file which takes longer to be interpreted.

In the old fashioned CSS-way you would give each button element e.g. the class .small-button. But this method pollutes your markup with unsemantic classes.

Sass provides a solution though: selector inheritance via the @extend directive.

If you set defaults for your parameter of the mixin, you can also provide a simple class, which uses the mixins with your default:

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

And then you can just inherit from this class in various contexts:

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

The resulting CSS statement aggregates all usages of .small button into one rule with comma-separated selectors:

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

Concluding, a naive usage of Sass can effect your CSS performance. Used wisely, however, it is maintainable thanks to well-structured and DRY code, it leads to proper separation of markup and styling (semantic classes only) and allows for smart and performant CSS code.

这篇关于sass是否会损害性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！