Skip to content

Commit 97dd88a

Browse files
L13L13
committed
- Initial release
0 parents  commit 97dd88a

File tree

13 files changed

+1372
-0
lines changed

13 files changed

+1372
-0
lines changed

‎.gitattributes

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Set default behavior to automatically normalize line endings.
2+
* text=auto
3+

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
*.vsix

‎.vscode/launch.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// A launch configuration that launches the extension inside a new window
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
{
6+
"version": "0.2.0",
7+
"configurations": [
8+
{
9+
"name": "Extension",
10+
"type": "extensionHost",
11+
"request": "launch",
12+
"runtimeExecutable": "${execPath}",
13+
"args": [
14+
"--extensionDevelopmentPath=${workspaceFolder}"
15+
]
16+
}
17+
]
18+
}

‎.vscodeignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.vscode/**
2+
.vscode-test/**
3+
.gitattributes
4+
.gitignore
5+
tests/**

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Change Log
2+
All notable changes to the "L13 CSS Snippets" extension will be documented in this file.
3+
4+
## [0.13.0] - 2019-08-25
5+
- Initial release

‎LICENCE.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
Copyright (c) 2019 L13|RARY
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.
20+
21+
Except as contained in this notice, the name(s) of the above copyright holders
22+
shall not be used in advertising or otherwise to promote the sale, use or other
23+
dealings in this Software without prior written authorization.

‎README.md

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
# L13 CSS and SCSS Snippets
2+
3+
This extension contains property snippets for CSS and rule snippets for SCSS.
4+
5+
## Index
6+
7+
1. [Introduction](#Introduction)
8+
1. [Shortcut rules for CSS snippets](#shortcut-rules-for-css-snippets)
9+
1. [Shortcut rules for SCSS snippets](#shortcut-rules-for-scss-snippets)
10+
1. [Recommended Settings](#recommended-settings)
11+
1. [Recommended Keyboard Shortcuts](#recommended-keyboard-shortcuts)
12+
13+
## Introduction
14+
15+
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.
16+
17+
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.
18+
19+
__The following prefixes are just examples to explain the rules.__ To see the complete list, please visit https://github.com/L13/vscode-css-snippets/tree/master/src/snippets . If a property or pattern might be missing, please open an issue on [Github](https://github.com/L13/vscode-css-snippets/issues) and make a suggestion.
20+
21+
## Shortcut rules for CSS snippets
22+
23+
### 1. The first letter in a word or after a minus "-" defines the prefix.
24+
25+
| Prefix | Snippet |
26+
| -------:| ------- |
27+
| `di` | <b>d</b>isplay: <b>i</b>nline; |
28+
| `dib` | <b>d</b>isplay: <b>i</b>nline-<b>b</b>lock; |
29+
| `wa` | <b>w</b>idth: <b>a</b>uto; |
30+
31+
### 2. Numbers are defined by the amount of numbers.
32+
33+
| Prefix | Snippet |
34+
| -------:| ------- |
35+
| `p1` | <b>p</b>adding: <b>0</b>; |
36+
| `p2` | <b>p</b>adding: <b>0 0</b>; |
37+
| `p3` | <b>p</b>adding: <b>0 0 0</b>; |
38+
| `p4` | <b>p</b>adding: <b>0 0 0 0</b>; |
39+
| `w1` | <b>w</b>idth: <b>0</b>; |
40+
| `zi1` | <b>z</b>-<b>i</b>ndex: <b>0</b>; |
41+
42+
### 3. Colors are defined with an underscore "\_".
43+
44+
| Prefix | Snippet |
45+
| -------:| ------- |
46+
| `c_` | <b>c</b>olor: <b>#000000</b>; |
47+
| `b_` | <b>b</b>ackground: <b>#000000</b>; |
48+
| `bs1_` | <b>b</b>order: <b>s</b>olid <b>0</b> <b>#000000</b>; |
49+
50+
### 4. The order of a value list is [function call] [keyword] [numbers] [color].
51+
52+
| Prefix | Snippet |
53+
| -------:| ------- |
54+
| `bunr2_`| <b>b</b>ackground: <b>u</b>rl() <b>n</b>o-<b>r</b>epeat <b>0</b> <b>0</b> <b>#000000</b>; |
55+
56+
### 5. Property prefixes are starting with a minus "-".
57+
58+
| Prefix | Snippet |
59+
| -------:| ------- |
60+
| `-br1` | <b>-</b>moz-<b>b</b>order-<b>r</b>adius: <b>0</b>; <b>-</b>webkit-<b>b</b>order-<b>r</b>adius: <b>0</b>; <b>b</b>order-<b>r</b>adius: <b>0</b>; |
61+
62+
### 6. Rules are starting with an "@" symbol.
63+
64+
| Prefix | Snippet |
65+
| -------:| ------- |
66+
| `@i` | <b>@i</b>mport ''; |
67+
68+
### 7. A dollar sign "$" defines a function call.
69+
70+
| Prefix | Snippet |
71+
| -------:| ------- |
72+
| `c$` | <b>c</b>alc<b>()</b>; |
73+
74+
### 8. A number after the dollar sign "$" defines the amount of parameters.
75+
76+
| Prefix | Snippet |
77+
| -------:| ------- |
78+
| `r$3` | <b>r</b>gb<b>(0, 0, 0)</b>; |
79+
| `r$4` | <b>r</b>gba<b>(0, 0, 0, 1)</b>; |
80+
81+
## Shortcut rules for SCSS snippets
82+
83+
### 1. All CSS snippets are available in SCSS, too.
84+
85+
### 2. Rules are starting with an "@" symbol.
86+
87+
| Prefix | Snippet |
88+
| -------:| ------- |
89+
| `@c` | <b>@c</b>ontent; |
90+
91+
### 3. An underscore "\_" after a prefix defines a brace scope.
92+
93+
| Prefix | Snippet |
94+
| -------:| ------- |
95+
| `@i_` | <b>@i</b>f CONDITION <b>{</b> ... <b>}</b> |
96+
97+
### 4. A dollar sign "$" defines also a mixin call.
98+
99+
| Prefix | Snippet |
100+
| -------:| ------- |
101+
| `@i$` | <b>@i</b>nclude NAME <b>()</b>; |
102+
| `@i$_` | <b>@i</b>nclude NAME <b>()</b> <b>{</b> ... <b>}</b>; |
103+
104+
### 5. The number "1" defines a one liner.
105+
106+
| Prefix | Snippet |
107+
| -------:| ------- |
108+
| `@e1` | <b>@e</b>xtend NAME; |
109+
110+
## Recommended Settings
111+
112+
It is recommended to exclude emmet support for CSS and SCSS in the settings.
113+
114+
```json
115+
"emmet.excludeLanguages": [
116+
"css",
117+
"scss"
118+
],
119+
```
120+
And it is recommended to set the snippet suggestions to top.
121+
122+
```json
123+
"editor.snippetSuggestions": "top",
124+
```
125+
126+
## Recommended Keyboard Shortcuts
127+
128+
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.
129+
130+
### macOS
131+
132+
* `Tab` - Jump to the next tab stop of the snippet.
133+
* `DownArrow` - Move the caret down one line.
134+
* `Cmd + Enter` - Insert line below, even if the caret is in the middle of a line.
135+
* `Cmd + Shift + Enter` - Insert line above, even if the caret is in the middle of a line.
136+
137+
### Windows / Linux
138+
139+
* `Tab` - Jump to the next tab stop of the snippet.
140+
* `DownArrow` - Move the caret down one line.
141+
* `Ctrl + Enter` - Insert line below, even if the caret is in the middle of a line.
142+
* `Ctrl + Shift + Enter` - Insert line above, even if the caret is in the middle of a line.

‎images/icon.png

11.5 KB
Loading

‎package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "l13-css-snippets",
3+
"displayName": "L13 CSS Snippets",
4+
"description": "Snippets for CSS and SCSS",
5+
"version": "0.13.0",
6+
"publisher": "L13RARY",
7+
"preview": true,
8+
"license": "SEE LICENCE IN LICENCE.md",
9+
"homepage": "https://github.com/l13/vscode-css-snippets/blob/master/README.md",
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/l13/vscode-css-snippets.git"
13+
},
14+
"bugs": {
15+
"url": "https://github.com/l13/vscode-css-snippets/issues"
16+
},
17+
"icon": "images/icon.png",
18+
"galleryBanner": {
19+
"color": "#232323",
20+
"theme": "dark"
21+
},
22+
"engines": {
23+
"vscode": "^1.32.0"
24+
},
25+
"categories": [
26+
"Snippets"
27+
],
28+
"keywords": [
29+
"css",
30+
"scss",
31+
"snippets"
32+
],
33+
"contributes": {
34+
"snippets": [
35+
{
36+
"language": "css",
37+
"path": "./snippets/css.json"
38+
},
39+
{
40+
"language": "scss",
41+
"path": "./snippets/css.json"
42+
},
43+
{
44+
"language": "scss",
45+
"path": "./snippets/scss.json"
46+
}
47+
]
48+
}
49+
}

0 commit comments

Comments
 (0)