SASSの使い方【２】VSコードのスニペット登録方法

SASSでの記述

メディアクエリのスニペット登録の例

Mac：メニューバー → Code-Insiders → 基本設定 → ユーザー スニペット

Win：ファイル → ユーザー設定 → ユーザー スニペットの校正

scss.jcon

{
	"breakpoint": {
	  "prefix": "break",
	  "body": [
      "\\$breakpoints: ("
      "'sp': \"(max-width: 767px)\","
      "'tab': \"(min-width: 768px) and (max-width: #{\\$layout-width-inner - 1px})\","
      "'pc': \"(min-width: #{\\$layout-width-inner})\""
      ") !default;"
      "",
      "@mixin mq(\\$breakpoint: sp) {"
      "@media #{map-get(\\$breakpoints, \\$breakpoint)} {"
      "@content;"
      "}"
      "}"
],
"description": "ブレイクポイント"
}
}

・「""」で括る
・SASSの変数「$」は、前に\\をつけることでエスケープさせる。
・「"」には、前に「\」をつけてエスケープ。
・改行は「"",」

http://miyabido.co.jp/test/web/?p=483