Sass 有两种语法,一种是 Sass 最开始用的,叫做缩进式的语法,使用这种语法的 Sass 文件的扩展名是 .sass ... 在 Sass 3.0 以后的版本里,介绍了一种新的语法,叫做 Sassy CSS ... 是现在比较常用的 Sass 语法。它更接近我们平时写的 CSS ,也更灵活一些,因为任何标准的 CSS 文件,把文件的扩展名换成 .scss ,然后在这个文件里,就可以直接使用 Sassy CSS 这种语法了。
这个视频我们来了解一下这两种语法的主要的区别 ... 首先就是文件的扩展名是不一样的 ... 缩进式的 SASS 的文件扩展名是 .sass ... Sassy CSS 的文件扩展名是 .scss ..
现在你看到的就是用这两种语法写的两个 Sass 文件 ... 左边这个是用 Sassy CSS 写的,右边这个是原始的缩进式的 Sass ...
首先这两种语法里面写注释的方法是不一样的 ... 比如这个多行注释 ... 在 Sassy CSS 里面,开始需要用一个 /* ,结束的地方要再用一个 */ ,而在缩进式的 Sass 里面,是不需要结束的 */ 的 ...
另外单行注释内容,Sassy CSS 需要每个单行注释内容的最开始都要使用 // ,在缩进式的 Sass 里,第一行的注释内容前面用 // ,其它的注释内容只要缩进一下就可以了。不需要每行的前面都加上 // 。
使用 @import 这个指令也有点区别,一个需要在要导入的东西的周围加上一组引号,在缩进式的 Sass 里是不需要的 ...
定义 mixin ,Sassy CSS 里面需要使用 @mixin 这个指令 ... 并且 mixin 的主体要放到一组花括号里面,每行代码的结尾的地方都要使用一个分号 ... 在缩进式的 Sass 里,定义 mixin ,可以使用这个 = 号 ... 不需要花括号,也不需要使用分号 .. 只要缩进就可以了。
引入 mixin ,Sassy CSS 需要使用 @include 指令 ... 缩进式的 SASS 用的是一个 + 号。 Sassy CSS 在写嵌套还有一般样式的时候,都要用到花括号还有分号 .. 缩进式的 Sass 也只需要使用缩进就行了 ...
在这个课程里我们会介绍使用 Sassy CSS 的语法去创建 Sass ...