scss.json

{
    // 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"
    // }
    "Add Snippet": {
        "prefix": "snippet",
        "body": [
            "\"Add Snippet\": { ",
            "\"prefix\": \"snippet\",",
            "    \"body\": [",
            "       \"$0\" ",
            "   ], ",
            "   \"description\": \"Add a new region to the SCSS file\"",
            "}"
        ],
        "description": "Add a new snippet template"

    },

    "Add Region": {
        "prefix": "region",
        "body": [
            "/* #region ${1:regionname} */",
            "$0",
            "/*#endregion*/"
        ],
        "description": "Add a new region to the SCSS file"
    },

    "Add Centerflex Mixin": {
        "prefix": "centerflex",
        "body": [
            "@include centerflex(row, wrap, center, center);"
        ],
        "description": "Add a new region to the SCSS file"
    },

    "Add Mobile Media Breakpoint": {
        "prefix": "mediamobile",
        "body": [
            "/* Mobile */",
            "@media (max-width: 480px) {",
            "$0",
            "}"
        ],
        "description": "Add a new media breakpoint"
    },

    "Add Tablet Media Breakpoint": {
        "prefix": "mediatablet",
        "body": [
            "/* Tablet */",
            "@media (min-width: 481px) and (max-width: 768px)",
            "$0",
            "}"
        ],
        "description": "Add a new media breakpoint"
    },

    "Add Notebook Media Breakpoint": {
        "prefix": "medianotebook",
        "body": [
            "/* Notebook */",
            "@media (min-width: 769px) and (max-width: 1024px) {",
            "$0",
            "}"
        ],
        "description": "Add a new media breakpoint"
    },

    "Add Desktop Media Breakpoint": {
        "prefix": "mediandesktop",
        "body": [
            "/* Desktop */",
            "@media (min-width: 1201px) {",
            "$0",
            "}"
        ],
        "description": "Add a new media breakpoint"
    },

    "Add All Media Breakpoint": {
        "prefix": "media",
        "body": [
            "/* Mobile */",
            "@media (max-width: 480px) {",
            "$0",
            "}",
            "/* Tablet */",
            "@media (min-width: 481px) and (max-width: 768px) {",
            "",
            "}",
            "/* Notebook */",
            "@media(min-width: 769px) and (max-width: 1024px) {",
            "",
            "}",
            "/* Desktop */",
            "@media (min-width: 1201px) {",
            "",
            "}",
        ],
        "description": "Add a new media breakpoint"
    },

}