sass 变量以美元符$开头,如$fontSize。
sass变量的值是可以是以下内容:
变量格式: $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 test1.scss
sass变量作用域
$fontSize: 12px;
$fontweight: 600;
/* 标签嵌套 */
div {
p {
font-size: $fontSize;
}
span {
font-size: $fontSize;
}
}
/* 属性嵌套 */
p {
font: {
size: $fontSize;
weight: $fontweight;
}
}
嵌套规则