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

---

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