Sass(Scss)基础梳理与实践

}

编译后变成：

.container {

margin: 20px auto;

}

.container p {

color: red;

}

与前面一致

也可以把整个$margin-tb当作Lists来看待，不用一个个分开写。

$p-color : red;

$margin-tb : 20px auto; // Lists

.container {

margin: $margin-tb;

p {

color: $p-color;

}

}

编译结果与前一致

Lists就是一个组合数据类型，各项之间由空格隔开，如果每一项还是组合内容的话，可以用括号括起来。

$gradients : (to left top, blue, red) (to left top, blue, yellow); // Lists

Maps是键值对，也是组合型数据类型，类似js中的对象，但把对象的花括号改成了圆括号

就像这样：

$content : (“p”:“padding”, “m”:“margin”);

$direction 😦‘t’:“top”, ‘b’:“bottom”, “l”:“left”, “r”:“right”);

关于Lists和Maps的其他用法，在后面的“Lists和Maps的使用”部分会提到

---

[](()@mixin语法

@mixin语法可以帮助我们复用一些功能相同的代码，设置默认样式，就像这样：

将字体颜色单独抽出来，保存在新文件_mixin.scss中：

// 以传递过来的color为底色，调节饱和度，默认调节比例为20%

@mixin font-color($color, $amount:20%) {

color: saturate($color, $amount); // saturate为调节饱和度的Sass内置函数

}

在index.scss中引入并使用：

@import “./mixin”;

.container {

margin: 20px auto;;

p {

@include font-color(#464); // 复用一

}

}

span {

@include font-color(#333, 40%); // 复用二

}

编译结果：

.container {

margin: 20px auto;

}

.container p