导语:本篇我想大家介绍SASS的一些知识，希望对大家有所帮助。
# 目录
- SASS介绍
- 安装配置
- 语法介绍
- SASS总结
- SASS介绍
SASS是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
# SASS介绍
SASS有以下四个特点:
兼容CSS:Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。
特性丰富:Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位
成熟:Sass已经经过其核心团队超过8年的精心打造。
行业认可:一次又一次地，行业把Sass作为首选CSS扩展语言。
社区庞大:数家科技企业和成百上千名开发者为Sass提供支持。
框架:有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。
# 安装配置
安装前，你需要安装npm和gulp这两个工具。
安装ruby
由于sass基于ruby语言开发而成，所以安装sass前还需要安装ruby。
安装成功后，在cmd中输入以下命令：
ruby -v
//如果成功则会出现
ruby 2.4.1p111 (2017-03-22 revision 58053) [x64-mingw32]
1
2
3
2
3
更换gem源
//1.删除原gem源
gem sources --remove https://rubygems.org/
//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/
//3.打印是否替换成功
gem sources -l
//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 安装sass
//初始化npm
npm init
//一路直下
npm install sass --save-dev
//查看版本
sass -v
//出现这说明安装成功
Sass 3.5.1 (Bleeding Edge)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
至此，已经安装好了sass。
# 语法介绍
下面介绍一些语法知识。
# 导入@import 'reset'
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。
# 注释
/**/多行注释
//单行注释
1
2
2
# 变量
声明变量用$符号
例如：$width:300px;
默认变量加上default
例如：$width:300px!default;
# 嵌套
选择器嵌套
div{
font-size: 20px;
a{
span{
font-weight: 500;
color: #ff0;
font-size: 5em;
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 属性嵌套
div {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 跳出嵌套
div{
font-size: 20px;
a{
@at-root span{
font-weight: 500;
color: #ff0;
font-size: 5em;
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 伪类嵌套
div{
&hover:{
color: #f00;
}
font-size: 20px;
a{
@at-root span{
font-weight: 500;
color: #ff0;
font-size: 5em;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# SASS总结
通过学习SASS，我感受到了SASS强大的CSS编译功能，确实方便我们每个人进行CSS编译开发。
