强化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. 通过函数可以进行颜色值与属性值的运算。
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20180502A0SXY200?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
