强化CSS 的辅助工具-SCSS的魅力初体验

一． 初识SCSS

在SCSS的官方网站上，他自身的定义是：SCSS 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，

什么意思呢？其实就是在CSS的基础上添加了一些新的功能，简单理解就是强化了CSS的一款工具而已，增加了一些新的语法，让使用更加方便，功能更加强大。

二． 真假SCSS

我们经常听到SCSS和SASS，总会混淆 二者，感觉二者并没有什么太大的区别，或者完全是一样的？那么他们到底是什么，有什么区别？

其实，SASS有两种语法格式。

SCSS是其中一种，这种是在CSS3语法的基础上进行拓展，所以所有的CSS3语法在SCSS中都是通用的，当然CSS的大多数的写法也是支持的，就算是早期的IE滤镜写法也支持，而这种格式以.scss作为拓展名。

另外一种就是被叫做缩进格式，也就是最早的SASS，这是一种简称，是一种简化格式，它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，这样做比 SCSS 更容易阅读，书写也更快速。当然缩进格式也可以使用 SASS 的全部功能，只是与 SCSS 相比是用的不同的表达方式在某些地方。

所以我们现在通常说的一般都是SCSS。

三． SCSS强大之处

我们说到SCSS增加了很多的功能，这也是SCSS的魅力所在，那么我们今天就简单了解一下SCSS强大的拓展功能有哪些吧。

1. 嵌套规则

我们CSS是不能嵌套的，但是SCSS允许实现嵌套的，内层的样式将他外层的选择器作为父选择器。也就是说：

.parent{

color:red;

.children{

line-height: 40px;

}

}

代表的CSS代码就是：

.parent{

color:red;

}

.parent .children{

line-height: 40px;

}

可以看出通过嵌套功能我们能让我们的代码结果更加清晰，CSS结构更加容易管理，且避免了重复输入父选择器。

2. 父选择器 &

在我们使用嵌套规则的时候，我们使用是很方便的，但是遇到要选择父选择器的时候，应该怎么办？比如当给某个元素设置hover样式的时候。

也就是说使用如下：

.parent{

color:red;

&:hover .children{

background: pink;

}

}

代表的CSS代码，就是如下的形式：

.parent{

color:red;

}

.parent:hover .children{

background: pink;

}

转化后的 CSS 文件中 & 将被替换成嵌套外层的父选择器。但是如果含有多层嵌套，那么最外层的父选择器会一层一层向下传递：

3. 属性嵌套

我们经常见到很多的属性有相同的前缀，比如文本属性，font-family, font-size, font-weight 都以 font 作为属性的前缀，为了方便我们使用，SASS允许将属性嵌套在命名空间中。

例如：

.example {

font: {

family: “微软雅黑”;

size: 30px;

weight: bold;

}

}

代表的CSS代码就是：

.example {

font-family: “微软雅黑”;

font-size: 30px;

font-weight: bold;

}

4. 占位符选择器 %foo

大家对于占位符选择器一定很陌生，但是大家一定听过id选择器，说类选择器，他们的写法分别是# 或者. ，那么其实占位符选择器也就是一个符号而已，%代表的就是我们占位符选择器，但是他必须通过@extend指令调用。

但是具体的用法大家现在可以不用管，我们后期会更加详细给大家讲解，现在大家只用记住当占位符选择器单独使用的时候，是不会编译到CSS文件中。

四． SCSS魅力提炼

感受之后，有没有觉得我们的SCSS非常的简单，是我们懒人必备神器，且结构更加清晰，理解更加容易？那么总的来说，SCSS美在如下几点：

1. SCSS可以自定义输出格式。

2. 完全兼容CSS3，在CSS基础上增加了变量、嵌套、混合等功能。

3. 提供了控制指令。

4. 通过函数可以进行颜色值与属性值的运算。