Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Property snippets for CSS and rule snippets for SCSS

License

NotificationsYou must be signed in to change notification settings

L13/vscode-css-snippets

Repository files navigation

This extension contains property snippets for CSS and rule snippets for SCSS.

What's new in CSS Snippets 0.18.0

  • Added_ for child brace scope& { ... }.
  • Added__ for simple brace scope#{} in SCSS.
  • Added#{clipboard} and#{selection} for keyboard shortcut usage.
  • Addedgrid properties.
  • Addedwriting-mode property.
  • Addedisolation property.
  • Addedblock andinline properties forborder,margin andpadding.
  • Added SCSS module functions.
  • Added$1,$d1 and$g1 for SCSS variable declaration.
  • Addedtrue,false andnull for SCSS.
  • Changed prefix for color from_ to#.
  • Simplified SCSS include.
  • Strings are always single quote.
  • Some fixes and clean up like simplified font.
  • Eliminated a lot of duplicated prefixes with value selection.
  • Removed properties with prefixes.

Index

  1. Introduction
  2. Shortcut rules for CSS snippets
  3. Shortcut rules for SCSS snippets
  4. Recommended Settings
  5. Recommended Keyboard Shortcuts
  6. 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 likefs1 ->flex-shrink: 0; andfont-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 visitSNIPPETS.md. If a property or pattern might be missing, please open an issue onGithub and make a suggestion.

Shortcut rules for CSS snippets

1. The first letter in a word or after a minus "-" defines the prefix.

PrefixSnippet
didisplay:inline;
dibdisplay:inline-block;
wawidth:auto;

2. Numbers are defined by the amount of numbers.

PrefixSnippet
p1padding:0;
p2padding:0 0;
p3padding:0 0 0;
p4padding:0 0 0 0;
w1width:0;
zi1z-index:0;

3. Colors are defined with "#".

PrefixSnippet
c#color:#000000;
b#background:#000000;
bs1#border:solid0#000000;

4. The order of a value list is [function call] [keyword] [numbers] [color].

PrefixSnippet
bunr2#background:url()no-repeat00#000000;

5. Rules are starting with an "@" symbol.

PrefixSnippet
@i@import '';

6. An underscore "_" after a prefix defines a brace scope.

PrefixSnippet
@m_@media{ ...}

7. A dollar sign "$" defines a function call.

PrefixSnippet
c$calc();

8. A number after the dollar sign "$" defines the amount of parameters.

PrefixSnippet
r$3rgb(0, 0, 0)
r$4rgba(0, 0, 0, 1)

Shortcut rules for SCSS snippets

1. All CSS snippets are available in SCSS, too.

PrefixSnippet
ttrue
ffalse
nnull

2. Rules are starting with an "@" symbol.

PrefixSnippet
@c1@content;

3. An underscore "_" after a prefix defines a brace scope.

PrefixSnippet
@i_@if CONDITION{ ...}

4. Variables are starring with a "$" sign.

PrefixSnippet
$1$name: null;
$d1$name: null !default;
$g1$name: null !global;

5. The number "1" defines a one line snippet.

PrefixSnippet
@e1@extend NAME;

6. A SassScript expression uses two underscores "__".

See alsoRecommended Keyboard Shortcuts.

PrefixSnippet
__#{ ...}

7. A child scope starts with an underscore "_".

PrefixSnippet
_&{ ...}
_h_&:hover{ ...}
_0_~ *{ ...}
_1_> *{ ...}

Recommended Settings

It is recommended to disable auto intellisense for snippet.

"editor.suggest.snippetsPreventQuickSuggestions":true

It is recommended to exclude emmet support for CSS and SCSS in the settings.

"emmet.excludeLanguages": ["css","scss"]

It is recommended to change the word separators for css and scss.

"[css]": {"editor.wordSeparators":"`~!#$%^&*()=+[{]}\\|;:'\",.<>/?",},"[scss]": {"editor.wordSeparators":"`~!#%^&*()=+[{]}\\|;:'\",.<>/?",}

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 sometimesDownArrow orCmd/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.

Quick SassScript Expression

The following keyboard shortcut improves the writing of a SassScript expression.

macOS

[{"key":"cmd+-","command":"editor.action.insertSnippet","when":"editorTextFocus && !editorReadonly && editorLangId == scss","args": {"name":"#{selection}" }},{"key":"alt+cmd+-","command":"editor.action.insertSnippet","when":"editorTextFocus && !editorReadonly && editorLangId == scss","args": {"name":"#{clipboard}" }}]

Windows and Linux

[{"key":"ctrl+-","command":"editor.action.insertSnippet","when":"editorTextFocus && !editorReadonly && editorLangId == scss","args": {"name":"#{selection}" }},{"key":"alt+ctrl+-","command":"editor.action.insertSnippet","when":"editorTextFocus && !editorReadonly && editorLangId == scss","args": {"name":"#{clipboard}" }}]

Recommended Extensions


[8]ページ先頭

©2009-2025 Movatter.jp