关于萨斯你可能不知道的 10 件事
关于萨斯你可能不知道的 10 件事
高级 Sass
从我开始开发的那天起，我就使用 Sass，无法想象没有它的前端编码。但事实是，我总是只知道它的顶部是什么，它允许做什么。
1.萨斯对 SCSS
第一个惊喜是最初的 Sass 语法没有使用分号和花括号:
$font-stack: Helvetica**,** sans-serif body
**font**: 100% $font-stack;另一个是我们熟悉的，叫做 SCSS 的——需要花括号和分号，允许在一个文件中混合普通 CSS 和 Sass。
$font-stack: Helvetica**,** sans-serif;
body {
**font**: 100% $font-stack;
}这让我们有机会通过简单地将旧的文件扩展名从.css改为.scss来开始编写 Sass。
2.变量有作用域！
另一个惊喜是变量有范围。如果我们在规则内部定义变量，它将只在规则内部可用，而不会扩大全局范围。
甚至更多——如果我们不确定变量已经在某个地方定义了，我们在声明中使用!default关键字，意思是——如果值存在于外部作用域中，那么使用它，否则请使用这个新值。在下面的评论中检查要点。
(所有示例在第一帧中显示 SCSS，在第二帧中显示生成的 CSS。)
3.首选 Mixin 以扩展
下一个功能是干原理支持。Sass 提供了两种实现方式:extend和mixin。
我不确定这场圣战是否还在继续，但即使在 Sass 引入了一个使用 extend with placeholder selector的伟大选项之后，它也允许在不污染全局选择器名称空间的情况下创建规则(现在我们污染了占位符选择器名称空间):
mixins对我来说似乎仍然是赢家，因为当我们扩展深度选择器时，它们不会导致生成巨大的 CSS，与使用extend的样式相比，它们实际上会生成更小的 gzip 文件(证据:https://tech . belly card . com/blog/sass-mixins-vs-extends-the-data/)。
因此，在接下来的章节中，我将重点介绍mixins，因为它们包含了许多优秀的特性。
4.Mixin — null作为默认参数值
好的，mixin接受一些输入参数，并把定义在其中的声明放在你想放的地方。
这使我们能够将include放在我们想要的地方，而不是多次复制/粘贴相同的代码，关于mixin参数有趣的事情是:
- 它们既可以是命名的，也可以是未命名的——所以当
include调用mixin时，我们可以省略其中的一些 - 每个参数都可以有一个默认值——所以如果参数的默认值是我们真正想要的，我们可以省略它
- 默认值可以是
null——这是一个非常有趣的例子。这意味着如果我们不指定参数并且它的默认值为 null，那么使用这个参数作为值的整个声明将从生成的 CSS 中删除。这为我们节省了编写 if/else 子句或稍后重置意外声明的时间，并减小了最终文件的大小😌
5.可变参数
另一个mixin的参数特征是variable declaration，其行为与 ES6 扩展操作符相同。它允许我们传递一个list或一个map(其中 map 类似于 JS 对象)而不是将每个参数单独传递给mixin，值将被自动分配。
这就是我们如何利用这些知识，例如，定义黑暗和光明主题:
很酷，对吧？是的。
另一个“酷，对”是我们可以传递参数，这样mixin的输入就变成了其内部mixin的输入。如果我们想要扩展一个供应商实用程序，比如说 Foundation 的“三角形”mixin来使其绝对定位，这可能是有帮助的:
6.N ice Media Queries with Mixin @内容
所以mixins给了我们传递声明值(inline，block，#fffff 等)甚至属性名(margin-right，color…)的好机会，但是如果我们想传递整个 SCSS 块，而不仅仅是它的一部分呢？我们可以使用content关键字。
让我们看看如何为媒体查询做这件事，这样当我们想用所需的媒体查询条件包装我们的代码时，就可以使用mixin:
这里最酷的是，每当我想将媒体查询语法复制并粘贴到代码中时，它实际上允许我停止在 IDE 中搜索“媒体”字符串。我不再需要它了。
7.再次范围
关于content需要记住的一件重要事情是，传递给mixin的内容块是在定义块的范围内计算的，而不是在mixin的范围内。
所以我们作为参数传递给mixin的变量不能在内容块中使用:
8.每个操作员
与if、for和while一起，我们可以使用each运算符，这在声明图标时非常有用:
9.命名
虽然不是非常有用，但是知道像mixin或placeholder selector名字这样的 Sass 标识符可以互换使用连字符和下划线还是有好处的。这意味着 Sass 中的dark-theme和dark_theme是相同的。还有这两个人:
༼ つ ◕_◕ ༽つ和༼ つ ◕-◕ ༽つ
嗯:)很遗憾，我们无法验证最后两个，因为它们是无效的标识符，抱歉:)
10.鼓励自己
最后我想分享的是，Sass 官方文档很短。
因为 CSS 不是一种编程语言，所以我低估了它所包含的工具的力量。后来我只花了几个小时浏览 Sass 文档，尽管如此，这给了我一大堆关于如何使代码更干净、更可读和更有性能的见解。
祝你编码愉快；)