语法
sass 有两种语法。 第一种被称为 SCSS (sassy CSS),是一个 CSS3 语法的扩充版本,本片教程就是基于此语法。
第二种比较老的语法成为缩排语法(或者就称为 “sass”), 提供了一种更简洁的 CSS 书写方式。 它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,I 而且也不使用分号,而是用换行符来分隔属性。
任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert
命令行工具,就可以将一种语法转换为另一种语法:
使用 sass
第一步需要安装sass(mac命令):
sass提供四个编译风格的选项:
如果要在命令行中运行 sass ,只要输入:
生产环境当中,一般使用最后一个选项:
你也可以让sass监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本:
变量,计算
sass允许使用变量,所有变量以$开头:
嵌套
sass允许选择器嵌套:
属性也可以嵌套,比如border-color属性,可以写成:
|
|
引用父选择符
|
|
注释: /* */ and //
sass共有两种注释风格:
- 标准的CSS注释 /* comment */ ,会保留到编译后的文件。(在/*后面加一个感叹号,表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。)
- 单行注释 // comment,只保留在sass源文件中,编译后被省略。
数据类型
sassScript 支持六种主要的数据类型:
- 数字(例如 1.2、13、10px)
- 文本字符串,无论是否有引号(例如 “foo”、’bar’、baz)
- 颜色(例如 blue、#04a3f9、rgba(255, 0, 0, 0.5))
- 布尔值(例如 true、false)
- 空值(例如 null)
- 值列表,用空格或逗号分隔(例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif)
sassScript 还支持所有其他 CSS 属性值类型, 例如 Unicode 范围和 !important 声明。 然而,它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。
插入文件
sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 sass 文件。 所有引入的 SCSS 和 sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
也可以通过一个 @import 引入多个文件。例如:
Mixin
Mixin可以重用的代码块,使用@mixin命令,定义一个代码块。
Mixin Arguments
|
|
Keyword Arguments
Mixin也可以使用显式关键字参数。例如,我们上面的例子可以写:
使用...
获得所有参数:
颜色函数
sass提供了一些内置的颜色函数,以便生成系列颜色:
函数
可以在sass中定义自己的函数,并在任何值或脚本上下文中使用它们。例如:
@each
|
|
看我上面的文章,大家有什么感受呢?你可以按照描述,安装好sass,然后边看边自己用记事本把上面的案例敲一遍,运行一遍,经过这一遍学习之后,相信您已经sass入门了,将来的sass进阶,请看后面的文章了!
要是您有什么问题,可以留言交流!