一、Sass 变量
sass 变量以美元符fontSize。
sass变量的值是可以是以下内容:
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null值
变量格式: $variablename: value;
变量作用域
头部定义的变量的作用域是变量以下所有区域，
在{ }内部定义的变量，内部有效，属于局部变量
sass变量不会变量提升，必须先定义后使用。
$fontSize: 16px; div { $fontSize: 24px; font-size: $fontSize; // 24px; } p { font-size: $fontSize; // 16px; } span { $fontSize: 26px !global; // !global 关键字设置变量为全局的 font-size: $fontSize; // 26px; } a { font-size:$fontSize; // 26px }
使用sass命令查看编译结果
# 控制台打印输出编译结果 $ sass test1.scss
输出结果
sass变量作用域
二、嵌套规则
- 选择器嵌套
选择器1嵌套选择器2，编译结果是选择器1下的选择器2。 - 属性嵌套
拥有同样前缀的属性可以将将前缀提取为公共部分。
$fontSize: 12px; $fontweight: 600; /* 标签嵌套 */ div { p { font-size: $fontSize; } span { font-size: $fontSize; } } /* 属性嵌套 */ p { font: { size: $fontSize; weight: $fontweight; } }
编译结果
嵌套规则
