Last active
June 17, 2024 13:43
-
-
Save nextab/0e8ca0019296f8d1eb3d5b0c5c540ff8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| // 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" | |
| // } | |
| "include centerflex": { | |
| "prefix": "cf", | |
| "body": [ | |
| "@include centerflex(${1:flex-flow}, ${2: flex-wrap}, ${3: justify-content}, ${4: align-items});", | |
| ], | |
| "description": "flex it baby!" | |
| }, | |
| "extend pretty button": { | |
| "prefix": "pb", | |
| "body": [ | |
| "@extend %pretty-button;", | |
| ], | |
| "description": "Extend the pretty button styles" | |
| }, | |
| "add new region": { | |
| "prefix": "region", | |
| "body": [ | |
| "/* #region ${1:regionname} */", | |
| "$0", | |
| "/* #endregion ${1:regionname} */", | |
| ], | |
| "description": "Add a new region in the SCSS file" | |
| }, | |
| "add standard transition": { | |
| "prefix": "trans", | |
| "body": [ | |
| "transition: all ${1:300ms} ease;", | |
| ], | |
| "description": "Add the standard transition CSS code." | |
| }, | |
| "add new media query": { | |
| "prefix": "breakpoint", | |
| "body": [ | |
| "/* #region width ${1:regionname} */", | |
| "@media only screen and (width ${1:regionname}) {", | |
| "\t$0", | |
| "}", | |
| "/* #endregion width ${1:regionname} */", | |
| ], | |
| "description": "Add a new breakpoint + region in the SCSS file" | |
| }, | |
| "set max width": { | |
| "prefix": "mw", | |
| "body": [ | |
| "margin-left: auto;", | |
| "margin-right: auto;", | |
| "max-width: ${1:600px};", | |
| "$0", | |
| ], | |
| "description": "Quickly set a max-width for an element and center it." | |
| }, | |
| "Helvetica": { | |
| "prefix": "helve", | |
| "body": [ | |
| "'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;", | |
| ], | |
| "description": "Output the best version of Helvetica there is." | |
| }, | |
| "keyframe": { | |
| "prefix": "keyframe", | |
| "body": [ | |
| "/* #region Keyframe ${1:myCoolAnimationName} */", | |
| "@keyframes ${1:myCoolAnimationName} {" | |
| " 0% { transform: translatey(0%); }", | |
| " 100% { transform: translatey(140px); }", | |
| "}", | |
| "/* #endregion Keyframe ${1:myCoolAnimationName} */", | |
| ], | |
| "description": "Good starting point for custom Keyframes.", | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment