Sass是一款强大的CSS预处理器，提供变量、嵌套规则、混合、导入等功能，增强CSS的可维护性和组织性。本文介绍了Sass的起源、特色功能、语法格式、配置扩展以及如何使用变量和嵌套规则，帮助前端开发者更高效地开发项目。
1. 为什么会出现CSS预处理技术?
css不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也比较简单，但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也逐渐不再满足于项目，没有类似js这样的编程语言所有的变量、常量以及其他的编程语法，css的代码难免会显得臃肿以及难以维护，但是又没有css的替代品，于是CSS预处理器就作为css的扩展，出现在了前端技术中。
Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass 以及Sass的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。
2. 特色功能：
- 完全兼容CSS3
- 在CSS基础上增加变量、嵌套(nesting)、混合(mixins)等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令(control directives)等高级功能
- 自定义输出格式
3. 语法格式：
1)、 Sass (Syntactically Awesome StyleSheets)，可翻译为"语法上很棒的样式表”，它有两种语法格式。首先是scss (Sassy cSS)——也是本文示例所使用的格式――这种格式仅在CSS3语法的基础上进行拓展，所有CSS3语法在SCSS中都是通用的，同时加入Sass的特色功能。此外，SCSS也支持大多数CSS hacks 写法以及浏览器前缀写法(vendor-specific syntax)，以及早期的IE滤镜写法。这种格式以 .scss 作为拓展名。
英文网: https://sass-lang.com
中文网: https://www.sass.hk
2）、另一种也是最早的Sass语法格式，被称为缩进格式(Indented Sass)通常简称Sass"，是一种简化格式。它使用“缩进”代替“花括号”表示属性属于某个选择器，用“换行"代替“分号”分隔属性，很多人认为这样做比SCSS更容易阅读，书写也更快速。缩进格式也可以使用Sass的全部功能，只是与SCSS相比个别地方采取了不同的表达方式，具体请查看the indented syntax reference。这种格式以.sass作为拓展名。
3）、任何一种格式可以直接导入(@import)到另一种格式中使用，或者通过sass-convert命令行工具转换成另一种格式:
# convert sass to scss
$sass-convert style.sass style.scss
#convert scss to sass
$sass-convert style.scss style.sass4. 配置扩展
vs code-->首选项-->设置-->搜索sass-->选择easy sass -->在setting.json中编辑配置代码，保存即可。若保存之后无效，可重启vs code
/* 压缩设置 */
"liveSassCompile.settings.formats":[
// This is Default.
{
"format": "compressed", // nested, expanded, compact, compressed
"extensionName": ".min.css",
"savePath": "~/../css" // 为 null 表示当前目录
}
],
/* 排除目录 */
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
/* 是否生成对应的map */
"liveSassCompile.settings.generateMap": false,
/* 是否添加兼容前缀 如： -webkit- , -moz- ... */
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
"liveSassCompile.settings.showOutputWindow": true5. 使用变量：
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width。为什么选择$符号呢?因为它好认、更具美感，且在cSS中并无他用，不会导致与现存或未来的css语法冲突。
6. 嵌套规则：
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID:
#content article h1 { color: #333 }
#content article p i margin-bottom: 1.4em }
#content aside { background-color: #EEE }
像这种情况，sass可以让你只写一遍，且使样式可读性更高。在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/*编译后*/
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
上边的例子，会在输出 css时把它转换成跟你之前看到的一样的效果。这个过程中，sass用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。首先，把#content(父级)这个id放到article选择器(子级)和aside选择器(子级)的前边:
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
/*编译后*/
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
然后，#content article里边还有嵌套的规则,sass重复一遍上边的步骤，把新的选择器添加到内嵌的选择器前边。
一个给定的规则块，既可以像普通的CSS那样包含属性，又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时，这种能力就非常有用了。
body内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/2-.min.css">
</head>
<body>
<header>
<ul>
<li>
<a href="">首页</a>
</li>
<li>新闻列表</li>
<li>关于我们</li>
<li>联系我们</li>
<li>会员中心</li>
</ul>
</header>
<div>
<nav>
<p>ppppppp</p>
</nav>
</div>
<div>
<nav>
<span>ssssssssss</span>
</nav>
</div>
</body>
</html>sass内容：
header {
ul {
width: 800px;
height: 60px;
border: 1px solid red;
margin-top: 20px;
li {
float: left;
width: 80px;
height: 60px;
line-height: 60px;
list-style: none;
transition: 2s;
background-color: green;
&:hover {
color: blue;
}
a {
color: white;
transition: 3s;
// 超链接的样式
&:hover {
color: blue;
}
}
}
}
}
div {
>nav {
p,
span {
color: red;
// border-style: solid;
// border-radius: 20px;
border: {
style: solid;
radius: 20px;
width: 5px;
}
}
}
}
// 引入sass文件，多个文件中间用逗号隔开即可
@import "_dome"css内容：
header ul{width:800px;height:60px;border:1px solid red;margin-top:20px}header ul
li{float:left;width:80px;height:60px;line-height:60px;list-style:none;-webkit-
transition:2s;transition:2s;background-color:green}header ul li:hover{color:blue}header ul
li a{color:#fff;-webkit-transition:3s;transition:3s}header ul lia:hover{color:blue}div>nav
p,div>navspan{color:red;borderstyle:solid;borderradius:20px;borderwidth:5px}p{width:100px;height:40px}效果：
6. 嵌套导入：
// 引入sass文件，多个文件中间用逗号隔开即可
@import "_dome"
跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。
7. 使用SASS部分文件：
当通过`@import 把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此,sass有一个特殊的约定来命名这些文件。
此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "night-sky" ; 。
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。
8. 注释
扫一扫
2537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
