スニペット極めて爆速コーディングを目指す【Sass編】

こんにちは。とあるフロントエンドエンジニアです。

どうやったらコーディングの速度を上げられるんだろうと思ってVSCodeのスニペットを研究する毎日。

普段どんなコードをよく書いているんだろうとGitHubのコードを徹底的に分析して効率化を図ったので、今回はその【Sass編】と題して、私のSassのスニペットをまとめてみました。

同じくコーディングの効率化に悩んでいる人はぜひ参考にしてみてください。

スニペットの設定方法

VSCodeで
code > 基本設定 > ユーザースニペット
と進みます。

するとスニペットを設定するメニューが出てくるので、scss.jsonを選びます。

開いたjsonファイルにこの記事のコードをコピペするだけで、Sassのショートカットを作成できます。

レッツエンジョイ！スニペットライフ！！

私の中のスニペットのルール

効率化を徹底してスニペットを登録しているわけですが、その中でも私なりのルールがあります。

• よくセットで使用するようなやつは登録しておく。
• スニペットのprefixに大文字は使わない(shiftで大文字にする手間が嫌)。
• 使用頻度が少ないスニペットは多少prefixが長くなっても構わない。

普段はこんな感じで自分なりのルールを設けてスニペットを設定しています。
皆さんも自分なりのルールを作っておくとスニペットのコマンドを把握しやすいかもですね。

コメントアウト

Sassファイル内でコメントアウトを残すときによく使うテンプレがあるのでスニペットに登録しています。

scss.json

"comment": {
  "prefix": "cmt",
  "body": [
    "/* ===============================================",
    "# $1",
    "=============================================== */",
  ],
  "description": "comment out"
}

このように登録しておくことで、わざわざ「=」を連打することなく、「prefix」に登録した「cmt」と打ってtabキーを押すだけでbodyに設定した内容が一気に出力されます。

$1はtabキーを押した際にカーソルが次に移動する箇所を指します。
$2、$3...と指定することでtabキーで簡単に指定した箇所にカーソルを移動できます。

このように$Xを指定することでカーソル移動も自動化できます。

ショートハンドのCSSプロパティ

ショートハンドが存在するCSSプロパティや、指定する値が多いプロパティもいちいち書くのがめんどくさいのでスニペットに登録しています。

scss.json

"boxShadow": {
  "prefix": "shadow",
  "body": [
    "box-shadow: ${1:2px} ${2:2px} ${3:5px} ${4:5px} ${5:#222};",
  ],
  "description": "set box-shadow"
},
"backGroundImage": {
  "prefix": "bgi",
  "body": [
    "background: url($1) no-repeat center center/cover;",
  ],
  "description": "set background-image"
},

ちなみに${number:XXX}と指定することでカーソルが飛んだ際の初期値を設定することができます。

特にbackground-imageを設定するときのこの順番は覚えていない(覚えてるけど毎回書くのがめんどくさい)のでコマンド一個でサクッと出力できるようにしています。

擬似要素

::beforeや::afterもコマンドで出力できるように設定しています。

これは個人的にすごく重宝しています。

scss.json

"before": {
  "prefix": "bfr",
  "body": [
    "&::before {",
    "\tcontent: '';",
    "\t$1",
    "}"
  ],
  "description": "create before class"
},
"after": {
  "prefix": "aft",
  "body": [
    "&::after {",
    "\tcontent: '';",
    "\t$1",
    "}"
  ],
  "description": "create after class"
},

擬似要素を使用するときはまぁほぼ確実にcontentを使うのでそれも一気に出力するようにしています。

実際に使うとこんな感じです。↓

これが私の場合、bfrと打つだけで出ます。楽ですね笑

擬似クラス

擬似要素同様、擬似クラスもいくつかスニペットに登録しています。

scss.json

"last-child": {
  "prefix": "lst",
  "body": [
    "&:last-child {",
    "\t$1",
    "}"
  ],
  "description": "create last-child"
},
"first-child": {
  "prefix": "fst",
  "body": [
    "&:first-child {",
    "\t$1",
    "}"
  ],
  "description": "create first-child"
},
"nth-child": {
  "prefix": "nth",
  "body": [
    "&:nth-child($1) {",
    "\t$2",
    "}"
  ],
  "description": "create nth-child"
}

Flexレイアウト

flexレイアウトもわりとお決まりで使用するパターンは登録してあります。

scss.json

"flexCenter": {
  "prefix": "flx-c",
  "body": [
    "display: flex;",
    "flex-wrap: wrap;",
    "justify-content: center;",
    "align-items: center;",
  ],
  "description": "flexbox with center center"
},
"flexAround": {
  "prefix": "flx-ard",
  "body": [
    "display: flex;",
    "flex-wrap: wrap;",
    "justify-content: space-around;",
    "align-items: center;",
  ],
  "description": "flexbox with space-around center"
},
"flexBetween": {
  "prefix": "flx-bwn",
  "body": [
    "display: flex;",
    "flex-wrap: wrap;",
    "justify-content: space-between;",
    "align-items: center;",
  ],
  "description": "flexbox with spaec-between center"
}

Gridレイアウト

Gridレイアウトをやっていて思ったのが、「これ、ある程度型決まってね？」という感想。
そこでじゃあスニペットで登録しようと思いました。

Grid系はやたらプロパティ名が長かったりするので登録しておくと楽に感じるかもしれません。

scss.json

"grid": {
  "prefix": "grd",
  "body": [
    "display: grid;",
    "grid-template-columns: ${1:40px 1fr};",
    "grid-template-rows: ${2:150px 1fr};"
  ],
  "description": "grid template"
},
"gridItem": {
  "prefix": "grditem",
  "body": [
    "grid-column: ${1:1} / ${2:2};",
    "grid-row: ${3:1} / ${4:2};",
  ],
  "description": "grid item template"
}

個人的にはgrid-column(row)をtabキーでサクサク入力できるようにしたところが気に入っています。

position:　absolute系

position: absoluteを使用して上下左右中央揃えや上下揃え、中央寄せなどもわりとセットで使う箇所が多いので、登録しています。

scss.json

"absolute-Center": {
  "prefix": "abso-c",
  "body": [
    "position: absolute;",
    "top: 50%;",
    "left: 50%;",
    "transform: translate(-50%, -50%);",
  ]
},
"absolute-VerticalCenter": {
  "prefix": "abso-vc",
  "body": [
    "position: absolute;",
    "top: 50%;",
    "left: $1;",
    "transform: translateY(-50%);",
]
},
"absolute-HorizontalCenter": {
  "prefix": "abso-hc",
  "body": [
    "position: absolute;",
    "top: $1;",
    "left: 50%;",
    "transform: translateX(-50%);",
  ]
}

レスポンシブ

レスポンシブデザインに対応したSassの変数やmixinもわりとよく使うなぁと思っているやつがあるので、予め登録してあります。

scss.json

"breakPoints": {
  "prefix": "brp",
  "body": [
    "\\$breakpoints: (",
    "\t'xs': (min-width: 0),",
    "\t'sm': (min-width: $2px),",
    "\t'md': (min-width: $3px),",
    "\t'lg': (min-width: $4px),",
    "\t'xl': (min-width: $5px),",
    "\t'xxl': (min-width: $6px)",
    ") !default;",
  ],
  "description": "$breakpoints"
},
"mixins-responsive": {
  "prefix": "mixin-responsive",
  "body": [
    "@mixin responsive(\\$breakpoint) {",
    "\t@if map-has-key(\\$breakpoints, \\$breakpoint) {",
    "\t\t@media screen and #{inspect(map-get(\\$breakpoints, \\$breakpoint))} {",
    "\t\t\t@content;",
    "\t\t}",
    "\t}",
    "\t@else {",
    "\t\t@error \"Key error\";",
    "\t}",
    "}",
  ],
  "description": "mixins max-screen content"
},

その他

scss.json

"fontSize": {
  "prefix": "fs",
  "body": [
    "font-size: ${1:16px};"
  ],
  "description": "set font-size"
}

「いや、font-sizeだったらEmmetでfz16って打てば出るし...」と思うかもしれません。
知ってます！！！

これは「Font Size」なのにEmmetでfとzで打つ仕様が個人的にどうしても気に食わないので無理やり上書きしたスニペットです笑

やっぱり自分の納得のいくコマンドで打ちたい...笑

ちなみにfsはEmmetではfont-styleが当てられていますが、使用頻度としてはfont-sizeの方が多い感もあるのでコマンドが被っていることには特に何も感じません。

まとめ

私のSassのスニペットはこんな感じです。
「ここもっとこうしたらいいよ〜」とか「私はこんなの設定してるよ〜」というご意見がありましたらぜひ教えてください。

この記事もジャンジャンアップデートしていくつもりです。