Introduction

As a developer, efficiency and speed are crucial. Visual Studio Code (VSCode) allows you to create custom snippets to reduce repetitive tasks and save time. In this article, we’ll walk you through adding a set of SCSS snippets to VSCode. These snippets are designed to help streamline your workflow when working with media queries, container queries, and loops in SCSS.

For this example I’ll make snippets for the media/container queries (see article).

Adding Snippets to VSCode

Follow these steps to add the provided snippets to VSCode:

1. Open VSCode: Launch your VSCode editor.
2. Access User Snippets:
   • Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the command palette.
   • Type “Preferences: Configure User Snippets” and select it.
3. Create or Edit SCSS Snippets:
   • In the snippet selector, type scss and select the scss.json file if it exists. If it doesn’t, create a new scss.json file.
4. Add Snippets:
   • Copy the following JSON and paste it into the scss.json file:

   {
       "Media query up": {
           "prefix": "@up",
           "body": [
               "@include media-breakpoint-up($1) {",
               "$2",
               "}",
           ],
           "description": "Media query up"
       },
       "Media query down": {
           "prefix": "@down",
           "body": [
               "@include media-breakpoint-down($1) {",
               "$2",
               "}",
           ],
           "description": "Media query down"
       },
       "Media query only": {
           "prefix": "@only",
           "body": [
               "@include media-breakpoint-only($1) {",
               "$2",
               "}",
           ],
           "description": "Media query only"
       },
       "Container query up": {
           "prefix": "@contup",
           "body": [
               "@include container-breakpoint-up($1) {",
               "$2",
               "}",
           ],
           "description": "Container query up"
       },
       "Container query down": {
           "prefix": "@contdown",
           "body": [
               "@include container-breakpoint-down($1) {",
               "$2",
               "}",
           ],
           "description": "Container query down"
       },
       "Container query only": {
           "prefix": "@contonly",
           "body": [
               "@include container-breakpoint-only($1) {",
               "$2",
               "}",
           ],
           "description": "Container query only"
       },
       "Property": {
	    "prefix": "@prop",
	    "body": [
		"@property --$1 {",
		"syntax: '<$2>';",
		"initial-value: $3;",
		"inherits: $4;",
		"}",
	    ],
	    "description": "Container query only"
	}
   }

Using the Snippets in VSCode

To use the snippets you’ve added:

1. Open an SCSS File: Open any .scss file in VSCode.
2. Trigger the Snippet:
   • Type the prefix for the desired snippet (e.g., @up for Media Query Up).
   • VSCode will suggest the snippet as you type. Press Enter or Tab to insert the snippet.
3. Fill in the Placeholder Values:
   • After inserting the snippet, you’ll see placeholders like $1, $2, etc
   • Navigate through the placeholders using Tab and fill in the required values.

Conclusion

Adding custom snippets in VSCode can significantly enhance your productivity by reducing repetitive coding tasks. With these SCSS snippets, you can handle media queries and container queries efficiently. If you find a little bit of code that you use frequently, You can now put It as a snippet.