【提高效率】sass的mixin和VScode的snippet组合使用大幅提高编码效率

【提高效率】sass的mixin和VScode的snippet组合使用大幅提高编码效率

作者：吴业飞
时间：2018年12月13日

---

背景

在日常编写前端代码时，会发现一些经常出现的代码组合，本着DRY(Don't repeat yourself)原则，我发现了sass的mixin和VScode的snippet组合使用可以大幅提高编码效率。

应用场景

举一个简单的例子。比如现在我们需要加一个标题样式，我们可能会写如下CSS代码

.title {
  font-size: 60px;
  line-height: 1;
  font-family: "Lato-Bold";
  color: #fff;
  margin-bottom: 15px;
}
复制代码

注意到我们用到了5个属性，很明显，一个网站里我们需要设置很多的文字类样式，也就是说我们每次都得重复写上面的5个属性，是不是感觉很枯燥很低效。有用过Sass之类工具的同学可能想到了写Mixin将上面的给文字设置样式的代码封装起来，我们可能会得到如下代码：

/*
*文本基本设置
*param {
	$fontSize: 
	$lineHeight: 
	$fontFamily: 
	$color: 
	$marginBottom: 
}
*/
@mixin text($fontSize, $lineHeight, $fontFamily, $color, $marginBottom: 0px) {
	font-size: $fontSize;
	line-height: $lineHeight;
	font-family: $fontFamily;
	color: $color;
	margin-bottom: $marginBottom;
}  
复制代码

现在我们的sass文件里可能是这样为.title设置样式的

.title {
    @include text(60px, 1, 'Lato-Bold', #fff, 15px);
}
复制代码

相比上面的写5个属性5行代码我们现在只要写一行代码就可以了！是不是很爽写起来！其实这没有什么新鲜的，用过Sass可能早就体验过了，我也是在用了一段时间这种写法后发现还是嫌麻烦，能不能再简单点！我想到了Snippet!自定义代码块，一键生成

.title {
    @include text(px, px, '', #, px);
}  
复制代码

在VScode里编辑自己的代码段（snippet），Ctrl + Shift + p,输入snippet,首选项：配置用户代码片段。比如我们编辑scss.json文件

"title": {
	"prefix": "title",
	"body": [
		".title {",
			"    @include text(px, px, '', #, px);",
		"}"
	],
	"description": "set class title"
}  
复制代码

现在我们有了Snippet,意味着我们在sass里只要敲title按下tab键，我们就有了如下结构

.title {
    @include text(px, px, '', #, px);
}   
复制代码

接下来我们要做的只是按照设计稿填参数就行了！

写在最后

本文只是抛砖引玉，这个技巧是我在最近一个项目中灵光一闪发现的，我的mixin和snippet文件也在持续更新中，在项目里发现可以提取出来的代码都会陆续封装起来，效率也在一直提升，也许还有更好的工作流程等待我去发现，没关系，在实践总学习吧，争取早日找到最佳实践！

---

版权声明：自由转载-非商用-非衍生-保持署名

转载于:https://juejin.im/post/5c11c209f265da61561f20fb