sass/scss 变量与嵌套规则

一、Sass 变量

sass 变量以美元符$开头，如$fontSize。

sass变量的值是可以是以下内容:

1. 字符串
2. 数字
3. 颜色值
4. 布尔值
5. 列表
6. null值

变量格式: $variablename: value;

变量作用域

头部定义的变量的作用域是变量以下所有区域， 在{ }内部定义的变量，内部有效，属于局部变量 sass变量不会变量提升，必须先定义后使用。

代码语言：javascript复制

$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命令查看编译结果

代码语言：javascript复制

# 控制台打印输出编译结果
$ sass test1.scss

输出结果

sass变量作用域

二、嵌套规则

1. 选择器嵌套 选择器1嵌套选择器2，编译结果是选择器1下的选择器2。
2. 属性嵌套 拥有同样前缀的属性可以将将前缀提取为公共部分。

代码语言：javascript复制

$fontSize: 12px;
$fontweight: 600;
/* 标签嵌套 */
div {
    p {
        font-size: $fontSize;
    }
    span {
        font-size: $fontSize;
    }
}
/* 属性嵌套 */
p {
    font: {
        size: $fontSize;
        weight: $fontweight;
    }
}

编译结果

嵌套规则

编程算法 打包 sass

0 人点赞