写这篇文章是为了记录一下�平时忽略的Sass方面的知识点，发现虽然平时一直在用，但是对Sass真的是知之甚少。完整的用法可以参照官网。如有错误，请大神指出。
1.CSS预处理器
学过CSS的人都知道，CSS不能算是一门编程语言，只是一行行单纯的属性描述用来控制网页样式，写起来相当的费事，而且代码难易组织和维护。
CSS预处理器定义一种专门的语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。可以在这种语言中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
本文主要讲解Sass语言。
2.Sass和Scss有什么区别？
Sass有两种语法：
1）第一种比较老的称为缩排语法，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的，不能兼容现有的css代码，这也是Sass早期不受欢迎的原因。使用这种语法的样式表文件以.sass为后缀名。
Sass写法：
body
color: #fff
background: #f36
2）第二种称为 SCSS (Sassy CSS)，是Sass进行改良后的结果，是 Sass 3 引入新的语法,其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。以.scss作为后缀名。
Sscc VS Sass.png
这两种语法可以使用命令行工具sass-convert相互转换：
# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss
# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass
下面提到的sass文件都是指以.scss为后缀名的文件
3.基本用法
3.1编译
使用下面的命令可以将.scss文件
#单文件编译
sass input.sass:output.css
#多文件编译
sass input-dir:output-dir
在编译 Sass 时，开启“watch”功能， 一旦代码有任何修改，可以自动监测到代码的变化，并且直接编译出来：
sass --watch input.sass:output.css
sass --watch input-dir:output-dir
Sass提供4种编译风格，编译时代上参数 --style NAME
嵌套输出方式 nested (默认值)
展开输出方式 **expanded **
紧凑输出方式 **compact **
压缩输出方式 compressed
如下，原scss文件代码为：
table{
tr{
td{
padding:5px;
}
}
a{
display:inline-block;
padding:10px;
}
}
4种风格编译后的结果为
//nested
table tr td {
padding: 5px; }
table a {
display: inline-block;
padding: 10px; }
//expanded 与nested类似，大括号另起一行
table tr td {
padding: 5px;
}
table a {
display: inline-block;
padding: 10px;
}
//compact 结果为单行css
table tr td { padding: 5px; }
table a { display: inline-block; padding: 10px; }
#compressed 一般生产环境中会选择压缩css代码，删掉注释与空格
table tr td{padding:5px}table a{display:inline-block;padding:10px}
3.2基本特性
1)变量
Sass中可以定义变量，以$打头，如果值后面加上!default则表示默认值
$green:#55b929 !default;
a{
color:$green;
}
默认变量在组件化开发中非常有用。它很像css属性中 !important 标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rect {
border-#{$side}-color: $green;
}
2）属性嵌套
平时用的较多的是选择器嵌套，孰不知属性也可以嵌套
//属性嵌套
.title {
font: {
size: 12px;
weight: bold;
}
}
3）~同层组合选择器
选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }
4）混合宏 VS 继承 VS 占位符
什么时候用混合宏，什么时候用继承，什么时候使用占位符？其实他们各有各的优点与缺点:
混合宏 VS 继承 VS 占位符
看看三种方式编译出来的css
//SCSS中混合宏使用
@mixin mt($var){
margin-top: $var;
}
.block {
@include mt(5px);
span {
display:block;
@include mt(5px);
}
}
.header {
color: orange;
@include mt(5px);
span{
display:block;
@include mt(5px);
}
}
//SCSS 继承的运用
.mt{
margin-top: 5px;
}
.block {
@extend .mt;
span {
display:block;
@extend .mt;
}
}
.header {
color: orange;
@extend .mt;
span{
display:block;
@extend .mt;
}
}
//SCSS中占位符的使用
%mt{
margin-top: 5px;
}
.block {
@extend %mt;
span {
display:block;
@extend %mt;
}
}
.header {
color: orange;
@extend %mt;
span{
display:block;
@extend %mt;
}
}
编译结果：
//SCSS中混合宏使用
.block {
margin-top: 5px;
}
.block span {
display: block;
margin-top: 5px;
}
.header {
color: orange;
margin-top: 5px;
}
.header span {
display: block;
margin-top: 5px;
}
//SCSS 继承的运用
.mt, .block, .block span, .header, .header span {
margin-top: 5px;
}
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
//SCSS中占位符的使用
.block, .block span, .header, .header span {
margin-top: 5px;
}
.block span {
display: block;
}
.header {
color: orange;
}
.header span {
display: block;
}
总结：
- 混合宏可以传参，如果代码中涉及变量，建议用混合宏
- 如果代码不需要传参，且有一个基类已在文件中存在，那么建议使用 Sass 的继承
- 占位符与继承类似，但是占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。
网友评论