Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、
混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。特色功能:
- 完全兼容css3
- 在css的基础上增加变量、嵌套、混合等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令(control directives)等高级功能
- 自定义输出格式
sass有两种语法格式,首先是 SCSS(Sassy CSS),这种格式仅在css3的语法上进行拓展,同时加入了Sass的特色功能。以 .scss 作为扩展名。
另一种是Sass语法格式,(又称:缩进格式),是一种简化格式,用“缩进”代替“花括号”表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性。以 .sass 作为扩展名
Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。嵌套功能避免了重复输入父选择器,而且令复杂的 CSS 结构更易于管理:
.solidPart { > svg { position: relative; top: 2px; .name { color: #ff7219; } } }父选择器&
&符号代表父选择器
a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; }}
// 以上&代表a选择器& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器,例如
#main {
color: black;
&-sidebar { border: 1px solid; }
}.suj { >p { font: { family: fantasy; size: 1em; weight: bold; } color: red; }}变量 $ (Variables: $)
变量以$开头,赋值方法与css属性方法的写法一样(变量支持作用域)
$r: red;
.suj { >p { font: { family: fantasy; size: 1em; weight: bold; } color: $r; }}SassScript 支持 6 种主要的数据类型:
- 数字,
1, 2, 13, 10px - 字符串,有引号字符串与无引号字符串,
"foo", 'bar', baz - 颜色,
blue, #04a3f9, rgba(255,0,0,0.5) - 布尔型,
true, false - 空值,
null - 数组 (list),用空格或逗号作分隔符,如:
margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif - maps, 相当于 JavaScript 的 object,
(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值,比如 Unicode 字符集,或 !important 声明。然而Sass 不会特殊对待这些属性值,一律视为无引号字符串。
数字运算 (Number Operations)
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
字符串运算 (String Operations)
+ 可用于连接字符串
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值:
p:before {
content: "I ate #{5 + 10} pies!";
}@import
Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。
@import "foo.scss";
或
@import "foo";
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);嵌套 @import
.example {
color: red;
}
然后导入到 #main 样式内
#main {
@import "example";
}将会被编译为
#main .example {
color: red;
}