【提升效率】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文件也在持续更新中，在项目里发现能够提取出来的代码都会陆续封装起来，效率也在一直提高，也许还有更好的工做流程等待我去发现，不要紧，在实践总学习吧，争取早日找到最佳实践！