json VS Code SCSS片段

Posted 2021-05-18

{
	// Place your snippets for scss here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Media query": {
		"prefix": "media",
		"body": [
			"@media #{$$1} {",
			"",
			"}"
		],
		"description": "Media query con interpolación"
	},
	"Media query mobile": {
		"prefix": "mobile",
		"body": [
			"@media #{$$mobile} {",
			"	$1",
			"}"
		],
		"description": "Hasta 756px"
	},
	"Media query desktop": {
		"prefix": "desktop",
		"body": [
			"@media #{$$desktop} {",
			"	$1",
			"}"
		],
		"description": "Desde 756px + 1px"
	},
	"Media query desktopLarge": {
		"prefix": "desktop large",
		"body": [
			"@media #{$$desktopLarge} {",
			"	$1",
			"}"
		],
		"description": "Desde 1440px"
	},
	"Media query desktopoMedium": {
		"prefix": "desktop medium",
		"body": [
			"@media #{$$desktopoMedium} {",
			"	$1",
			"}"
		],
		"description": "Hasta 1280px"
	},
	"Media query onlyDesktopMedium": {
		"prefix": "desktop medium only",
		"body": [
			"@media #{$$onlyDesktopMedium} {",
			"	$1",
			"}"
		],
		"description": "Desde 1280px + 1 px Hasta 1440px"
	},
	"Media query tablet": {
		"prefix": "tablet",
		"body": [
			"@media #{$$tablet} {",
			"	$1",
			"}"
		],
		"description": "Hasta 756px"
	},
	"Media query onlyTablet": {
		"prefix": "tablet only",
		"body": [
			"@media #{$$onlyTablet} {",
			"	$1",
			"}"
		],
		"description": "Desde 416px + 1 hasta 756px"
	},
	"Media query fromTablet": {
		"prefix": "from tablet",
		"body": [
			"@media #{$$fromTablet} {",
			"	$1",
			"}"
		],
		"description": "Desde 416px"
	},
	
	"Media query phone": {
		"prefix": "phone",
		"body": [
			"@media #{$$phone} {",
			"	$1",
			"}"
		],
		"description": "Hasta 416px"
	},
	"Media query phoneSmall": {
		"prefix": "phone small",
		"body": [
			"@media #{$$phoneSmall} {",
			"	$1",
			"}"
		],
		"description": "Hasta 320px"
	},
	"Interpolación": {
		"prefix": "#",
		"body": [
			"#{ $1 }"
		],
		"description": "Interpolación"
	},
	"Selector de término": {
		"prefix": "class",
		"body": [
			"[class*=\"$1\"] {",
			"	$2",
			"}"
		],
		"description": "Selector de término de atributo"
	},
	"Bloque de comentario": {
		"prefix": "Comment",
		"body": [
			"/*******************************************************************************",
			"$1 */",
		],
		"description": "Bloque de comentarios"
	},
	"Modelo de padding": {
		"prefix": "padding model",
		"body": [
			"padding: {",
			"	top: $1;",
			"	right: $1;",
			"	bottom: $1;",
			"	left: $1;",
			"}",
		],
		"description": "Padding model"
	},
	"Modelo de margen": {
		"prefix": "margin model",
		"body": [
			"margin: {",
			"	top: $1;",
			"	right: $1;",
			"	bottom: $1;",
			"	left: $1;",
			"}",
		],
		"description": "Margin model"
	},
}