Sass入门
什么是css预处理器
众所周知css并不能算是一们真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。
在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。
什么Sass
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass 是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。
Sass 是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。
Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的Sass也被称为Scss。
Sass 和 SCSS 有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 先来看一个示例：Sass 语法
$font-stack: Helvetica, sans-serif //定义变量 $primary-color: #fff //定义变量 body font: 100% $font-stack color: $primary-color SCSS 语法
$font-stack: Helvetica, sans-serif; $primary-color: #fff; body { font: 100% $font-stack; color: $primary-color; } 编译出来的 CSS
body { font: 100% Helvetica, sans-serif; color: #fff; } 文件后缀名
sass有两种后缀名文件：
一种后缀名为sass，不使用大括号和分号； 另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。 而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
//文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 body { background: #eee; font-size:12px; } p{ background: #0982c1; } 注意：“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。 ps：本文采用的语法格式都将使用的是 SCSS 语法格式。
四种style生成后的css
在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
在知识点中，嵌套输出方式，在前端是可以看到效果的，后几种方式是需要在命令行中编译的，在编译的时候分别带上参数“ --style expanded --style compact --style compressed”:
Sass 提供了一种嵌套显示 CSS 文件的方式
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nested 编译出来：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } expanded 这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } compact 编译出来：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } compressed 编译出来：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none} 声明变量
JavaScript中声明变量都是使用关键词“var”开头，但是在 Sass 不使用这个关键词，而是使用美元符号“$”开头。
Sass 的变量包括三个部分：
- 声明变量的符号“$”
- 变量名称
-
赋予变量的值
//sass style $highlight-color: #F90;
变量的引用
凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
$color: #F90; .box2 { border: 1px solid $color; } //编译后 .box2 { border: 1px solid #F90; }
看上边示例中的$color变量，它被直接赋值给border属性，当这段代码被编译输出css时，$color会被#F90这一颜色值所替代。产生的效果就是给box2这个类一条1像素宽、实心且颜色值为#F90的边框。
在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：
$color: #F90; $border: 1px solid $color; .box2 { border: $border; } //编译后 .box2 { border: 1px solid #F90; }
这里，$border变量的声明中使用了$color这个变量。产生的效 果就跟你直接为border属性设置了一个1px $color solid的值是一样的。
更多内容和示例参考： http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
