include调用 html Sass和Compass学习笔记系列之Sass(3)

我们也可以调用的时候不用传参数，那么写法又发生了改变，如下：

下面介绍@extend：

@extend可以帮助我们明确的指定一个选择器去继承另一个选择器的样式，例如：

最后生成的CSS代码如下：

@extend支持继承多个选择器，和@include一样。

@extend的两个知识点：

1.@extend不可以继承选择器序列，也就是不能继承嵌套选择器。例如：

结果直接报错，如下：

2.如果我们为Sass写插件，可能会有很多供别人继承的选择器，但是我们并不希望这些选择器被输出到CSS文件里面，因为别人可能用不着继承这个选择器，这样就会有冗余样式的生成，这时候我们可以使用%，用来构建只用来继承的选择器。例如：

生成的CSS文件样式为：

我们只看到.serious-error-2的选择器，没看到.error-2的选择器。

4)Sass中的@media跟CSS区别

区别是：Sass中的media query可以内嵌在CSS规则中，在生成CSS的时候，media query才会被提到样式的最高层级。

好处：避免我们重复书写选择器或者打乱样式表的流程。

浏览器在解析一个CSS选择器的时候，是按照从右往左的顺序解析的。例如：按照下面第一张图说明，浏览器会首先找到页面中所有的.headline的类名，然后再一层一层往上去遍历，遍历.headline的父级元素中有没有类名为.main-sec，直到找到或者遍历到html一级，这样往往导致样式渲染的低效。

通过嵌套还有一些副作用：增加了样式修饰的权重，制造了这种样式位置的依赖。最佳实践是给相应的元素起名.main-sec-headline和.main-sec-detail，对这两个类进行样式的修饰，如下。但是这样写多了以后，又不如嵌套清晰易维护，所以更好的办法是可以在嵌套的时候，使用Sass的@at-root指令，明确的指定被嵌套的内容会输出到样式表的顶层。这样虽然我们是用嵌套的方式去写的，但是在生成的CSS样式表中，却不包含嵌套。

通过一个例子说说其他Sass语法：

最后说说Sass的四种输出格式，打开config.rb，里面有一行叫做output_style，这一项就是控制CSS的输出样式。

很好的反应了CSS修饰HTML的结构，根据嵌套，在输出的时候对应缩进，嵌套的越深，缩进的就越多

注：

1.如果使用中文出现乱码，请在文件最开始使用@charset “UTF-8”;

2.Sass的计算是可以带单位的，意味着不能混用两种不同的单位。

3.CSS3引入了HSL的颜色模式，H：色调，S：饱和度，L：亮度，不过在IE6-8不支持。

4.Sass允许我们通过@function声明函数，但是一般很少使用。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-55067-3.html