This extension contains property snippets for CSS and rule snippets for SCSS.
This extension is part of the L13 Extension Pack.
- Added complete snippet list as markdown.
- Added property "content".
- Introduction
- Shortcut rules for CSS snippets
- Shortcut rules for SCSS snippets
- Recommended Settings
- Recommended Keyboard Shortcuts
The idea of those snippets is to create a property instantly based on some simple rules without selecting it by menu or auto completion. Write one to six characters and you get the property and the value.
Only a few prefixes are twice, because the rules are matching different properties like fs1 -> flex-shrink: 1; and font-size: 0;. Then you have to pick the right one.
The following prefixes are just examples to explain the rules. To see the complete list, please visit SNIPPETS.md. If a property or pattern might be missing, please open an issue on Github and make a suggestion.
| Prefix | Snippet |
|---|---|
di |
display: inline; |
dib |
display: inline-block; |
wa |
width: auto; |
| Prefix | Snippet |
|---|---|
p1 |
padding: 0; |
p2 |
padding: 0 0; |
p3 |
padding: 0 0 0; |
p4 |
padding: 0 0 0 0; |
w1 |
width: 0; |
zi1 |
z-index: 0; |
| Prefix | Snippet |
|---|---|
c_ |
color: #000000; |
b_ |
background: #000000; |
bs1_ |
border: solid 0 #000000; |
| Prefix | Snippet |
|---|---|
bunr2_ |
background: url() no-repeat 0 0 #000000; |
| Prefix | Snippet |
|---|---|
-br1 |
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; |
| Prefix | Snippet |
|---|---|
@i |
@import ''; |
| Prefix | Snippet |
|---|---|
c$ |
calc(); |
| Prefix | Snippet |
|---|---|
r$3 |
rgb(0, 0, 0); |
r$4 |
rgba(0, 0, 0, 1); |
| Prefix | Snippet |
|---|---|
@c |
@content; |
| Prefix | Snippet |
|---|---|
@i_ |
@if CONDITION { ... } |
| Prefix | Snippet |
|---|---|
@i$ |
@include NAME (); |
@i$_ |
@include NAME () { ... }; |
| Prefix | Snippet |
|---|---|
@e1 |
@extend NAME; |
It is recommended to exclude emmet support for CSS and SCSS in the settings.
"emmet.excludeLanguages": [
"css",
"scss"
],And it is recommended to set the snippet suggestions to top.
"editor.snippetSuggestions": "top",Please have the following keyboard shortcuts always in mind, because these are fundamental to get the most out of it. Every tab stop is used only if necessary, because it prevents VS Code to open the IntelliSense menu automatically. So sometimes DownArrow or Cmd/Ctrl + Enter can have the same effect.
Tab- Jump to the next tab stop of the snippet.DownArrow- Move the caret down one line.Cmd + Enter- Insert line below, even if the caret is in the middle of a line.Cmd + Shift + Enter- Insert line above, even if the caret is in the middle of a line.
Tab- Jump to the next tab stop of the snippet.DownArrow- Move the caret down one line.Ctrl + Enter- Insert line below, even if the caret is in the middle of a line.Ctrl + Shift + Enter- Insert line above, even if the caret is in the middle of a line.