混合器 选择器继承

混合器

混合器使用@mixin标识符定义

何时使用混合器

●一个逻辑单元的一组属性

●html 元素外观的展示性描述

混合器中的CSS规则

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性

当一个包含css规则的混合器通过@include包含在一个父规则中时， 在混合器中的规则最终会生成父规则中的嵌套规则。sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。

混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样，sass 解开嵌套规则时，父规则中的选择器替代&。

选择器继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，通过@extend语法实现

何时使用继承

●你可以为这两个类分别写相同的样式，但是如果有大量的重复怎么办?使用sass时，我们提倡的就是不要做重复的工作。

●你可以使用一个选择器组(比如说.error, .seriousError )给这两个选择器写相同的样式。如果.error 的所有样式都在同一一个地方，这种做法很好，但是如果是分散在样式表的不同地方呢?这样做就困难多了。

●你可以使用一 个混合器为这两个类提供相同的样式，但当. error的样式修饰遍布样式表中各处时，这种做法面临着跟使用选择器组一样的问题。 这两个类也不是恰好有相同的样式。你应该更清晰地表达这种关系。

●综上所述你应该使用@extend。 让.seriousError从.error继承样式，使两者之间的关系非常清晰。更重要的是无论你在样式表的哪里使用，. error, .seriousError 都会继承其中的样式。

继承的高级用法

任何CSs规则都可以继承其他规则，几乎任何Css规则也都可以被继承。最常用的一种高级用法是继承一个html元素的样式。尽管默认的浏览器样式不会被继承，因为它们不属于样式表中的样式，但是你对html元素添加的所有样式都会被继承。

假如一条样式规则继承了一个复杂的选择器，那么它只会继承这个复杂选择器命中的元素所应用的样式。

继承的工作细节

关于@extend有两个要点

●跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性,所以使用继承往往比混合器生成的Css体积更小。

●继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css 层叠规则会决定应用哪个样式。相当直观:通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

使用继承的最佳实践

避免这种情况出现的最好方法就是不要在cCSs规则中使用后代选择器(比如.foo .bar) 去继承cCss规则

完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，有一个前提就是，不要用后代选择器去继承。