sass/scss 变量与嵌套规则

王小婷

发布于 2019-12-11 10:43:24

1.1K0

发布于 2019-12-11 10:43:24

文章被收录于专栏：编程微刊编程微刊

一、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;
    }
}