sass study notes (6)

1. Using inheritance to streamline CSS selector

Use sass, when the last repetition of the main features is to reduce the selectors inheritance. Based on the concept of the object face css, selector inheritance is said that a selector can inherit all styles Another option is defined. The syntax is achieved by @extend, the following code

//通过选择器继承继承样式
.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

In the top of the code, .seriousError at any position will inherit the stylesheet for all styles .error defined. With class = "seriousError" modified html elements in the final display effect is like class = "seriousError error". Related elements will not only have a wide 3px border, and the border will turn red, and this element while there will be a light red background, because these styles are defined in .error inside.

.seriousError not only inherits all .error own style, any combination of selectors style with .error will be related to a combination of inherited .seriousError selector form, the following code:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

As described above, in the hyperlink in the class = "seriousError" the html element will become bold and red.

2. When using inheritance

When you need a lot of repeating patterns you need to reuse.

3. Advanced Usage inheritance

Css rules can inherit any other rules, almost any css rules can be inherited. In most cases you may want to use class inheritance, but there are some situations you might want to do more. The most common usage is to inherit an advanced style of an HTML element. Although the default browser styles are not inherited, because they do not belong to the style sheet style, but you add all the styles for HTML elements will be inherited.

.disabled {
  color: gray;
  @extend a;
}

If a style rule inherited a complex selector, it will only inherit the style complex selectors hit element is applied. For example, if .seriousError @ extend.important.error, then .important.error and h1.important.error style will be inherited .seriousError, but .important .error styles or under will not be inherited. In this case you'll probably want to be able to inherit .important .seriousError or .error under the style respectively.

If a selector sequence (#main .seriousError) @extend another selector (.error), then only fully hit #main .seriousError this element selectors will inherit .error style, as a single class that inherits the name . Elements other than .main element has class = "seriousError" will not be affected.

Like #main .error this sequence selector it can not be inherited. This is because under normal circumstances styles inherited from #main .error will be consistent with inherited directly from .error in style, subtle differences often confusing.

4. With regard to @extend there are two main points you should know.

        跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
        继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。