Sass基于CSS的嵌套扩展

每日美图

介绍

本章内容需要读者有一些面向对象的基本概念，如面向对象的继承，可以直接点击进入百度百科进行查看。

前文回顾

我们在“Sass介绍”一章的总结中写到Sass的特性

3.兼容CSS3语言，在 CSS 基础上增加 嵌套 (nesting)、变量、混合指令 (mixins) 、内置函数指令(inner  function)、Sass拓展（自定义函数、存储缓存、自定义导入）

我们接下来对sass的学习也会依次从嵌套、变量、混合、内置函数 Sass拓展 展开，中间各部分会有少许内容结合学习，不过不会很多，不要紧张呀。

Sass的嵌套扩展

CSS选择器嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

@charset "UTF-8";

#main{

background-color:aliceblue;

  .subclass{

  border:1rem aquamarine solid;

  }

}

编译后的文件为

#main {

background-color:aliceblue;

}

#main .subclass {

border:1rem aquamarine solid;

}

可以验证.subclass 选择器 因嵌套在 #main 选择器内部，所以.subclass 编译后作为#main的内部选择。

CSS父选择器的嵌套引用

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器

@charset "UTF-8";

#main{

background-color:aquamarine;

  &:hover {

background-color:coral;

  }

}

编译后为

#main {

background-color:aquamarine;

}

#main:hover {

background-color:coral;

}

/*# sourceMappingURL=referenceFatherSelector.css.map */

可以发现&符号被替换为了外部选择器，用于在内部引用该符号的样式所在的选择器。

CSS样式继承嵌套

Sass 允许将一套 CSS 样式继承进另一套样式中，进行复用

@charset "UTF-8";

.pop {

font-family:仿宋;

}

.pop .bg{

background-color:azure;

}

.alert-pop {

@extend .pop;

  color:red;

}

编译后为

@charset "UTF-8";

.pop, .alert-pop {

font-family:仿宋;

}

.pop .bg, .alert-pop .bg {

background-color:azure;

}

.alert-pop {

color:red;

}

/*# sourceMappingURL=extendsCss.css.map */

我们使用了“@extend"实现了样式的继承，@extend是Sass的一个指令，此指令的功能就是实现样式的复用。

发现可以继承样式的是因为在.pop选择器的样式处，添加了同等的.alert-pop样式选择器，同时保留.alert-pop自己的样式,即

.pop        变为  .pop,.alert-pop

.pop .bg 变为  .pop .bg,.alert-pop .bg

CSS样式属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。

这个就比较简单了如font属性或者background属性等

@charset "UTF-8";

#main{

font: {

family:新宋体;

    size:0.2rem;

  }

background: {

color:aquamarine;

    repeat:no-repeat ;

    image:url("http://baidu.com");

  };

}

编译后为

@charset "UTF-8";

#main {

font-family:新宋体;

  font-size:0.2rem;

  background-color:aquamarine;

  background-repeat:no-repeat;

  background-image:url("http://baidu.com");

}

/*# sourceMappingURL=extendsFields.css.map */

总结

1.CSS样式分为三个层次 选择器->样式->样式属性 ；

2.sass作为一门高级的脚本语言具备高级语言的可复用高扩展的特性，相比较于CSS具体体现在各层次的复用与扩展；

3.针对CSS样式的三个层次进行了不同的复用 选择器的复用、样式的复用、相同命令空间样式属性的复用；

4.选择器的复用 又包括 选择器的嵌套复用 即内部选择器可以直接嵌套在外部选择器内部 ，使用 &引用当前&符号所在样式的选择器；

5.样式的复用 使用的是 @extend 指令。

6.本文中所有的源码可在此链接下载，如果出现中文编码问题，可参考此篇文章