CSS and SCSS Snippets
This extension contains property snippets for CSS and rule snippets for SCSS.
What's new in CSS Snippets 0.17.0
- Added
l13Snippets.shellScript.useFunctionBlockPadding to enable or disable line padding in function blocks.
Index
- Introduction
- Shortcut rules for CSS snippets
- Shortcut rules for SCSS snippets
- Recommended Settings
- Recommended Keyboard Shortcuts
- Recommended Extensions
Introduction
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.
Shortcut rules for CSS snippets
1. The first letter in a word or after a minus "-" defines the prefix.
| Prefix |
Snippet |
di |
display: inline; |
dib |
display: inline-block; |
wa |
width: auto; |
2. Numbers are defined by the amount of numbers.
| 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; |
3. Colors are defined with an underscore "_".
| Prefix |
Snippet |
c_ |
color: #000000; |
b_ |
background: #000000; |
bs1_ |
border: solid 0 #000000; |
4. The order of a value list is [function call] [keyword] [numbers] [color].
| Prefix |
Snippet |
bunr2_ |
background: url() no-repeat 0 0 #000000; |
5. Property prefixes are starting with a minus "-".
| Prefix |
Snippet |
-br1 |
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; |
6. Rules are starting with an "@" symbol.
| Prefix |
Snippet |
@i |
@import ''; |
7. A dollar sign "$" defines a function call.
| Prefix |
Snippet |
c$ |
calc(); |
8. A number after the dollar sign "$" defines the amount of parameters.
| Prefix |
Snippet |
r$3 |
rgb(0, 0, 0) |
r$4 |
rgba(0, 0, 0, 1) |
Shortcut rules for SCSS snippets
1. All CSS snippets are available in SCSS, too.
2. Rules are starting with an "@" symbol.
| Prefix |
Snippet |
@c |
@content; |
3. An underscore "_" after a prefix defines a brace scope.
| Prefix |
Snippet |
@i_ |
@if CONDITION { ... } |
4. A dollar sign "$" defines also a mixin call.
| Prefix |
Snippet |
@i$ |
@include NAME (); |
@i$_ |
@include NAME () { ... }; |
5. The number "1" defines a one line snippet.
| Prefix |
Snippet |
@e1 |
@extend NAME; |
Recommended Settings
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",
Recommended Keyboard Shortcuts
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.
macOS
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.
Windows / Linux
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.
Recommended Extensions
