【提升效率】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文件也在持續更新中，在項目裏發現能夠提取出來的代碼都會陸續封裝起來，效率也在一直提高，也許還有更好的工做流程等待我去發現，不要緊，在實踐總學習吧，爭取早日找到最佳實踐！