StyleDeck: SCSS IntelliSense, Tokens, Assets, SVG Editor & Animation

The missing IntelliSense for modern Sass and CSS. StyleDeck understands @use / @forward namespaces and shows token values inline. It converts px ⇄ rem with one key, and gives you a visual picker for CSS anchor positioning. It also covers container and scroll-state queries, and adds a live Design Tokens sidebar, an Asset Explorer, an OKLab Colour panel and a full SVG editor with an animation timeline. For design engineers it also has inline CSS previews (angle dials, easing curves, modern colour swatches, shadows, gradients, flex and grid layouts) with click-to-edit, BEM shortcuts, and a Design Studio of generators for OG images, palettes, shadows, gradients, patterns, layouts and blur placeholders.

Design Tokens sidebar	Colour panel

Works in .scss, .sass, .css and .less, and inside <style> blocks in Vue, Svelte, Astro and HTML.

---

Features at a glance

	Feature	What it does
🧠	Sass module IntelliSense	Completions, signature help, hovers and Go to Definition through @use namespaces and @forward chains
🔎	Inline values	See what $space-lg or var(--gap) resolves to, with rem shown in px, right above the line
📦	@use member lens	One click lists a module's functions, mixins and variables, and copies them with the right namespace
⇄	px ⇄ rem	Option+Z / Alt+Z converts the value under the cursor, the selection or the whole line
⚓	Anchor position picker	Click a 3×3 grid to place tooltips and menus, and the CSS is written into your rule
🌀	Scroll animation editor	Build scroll-driven and scroll-triggered animations on a keyframe timeline with a live scroll preview, then insert the CSS
📐	Container & scroll-state queries	Context-aware suggestions for container-type, @container, scroll-state(), style()
🎨	Design Tokens sidebar	Every variable, color, mixin and function in the project, searchable, with an unused filter
🖼️	Asset Explorer	Preview and crop images, copy clean imports, find unused assets
🌈	Colour panel	Compact 3D OKLab wheel, screen eyedropper, palettes, shade scales, contrast checks and your project's colour tokens
✏️	SVG editor	Open any .svg in an Illustrator-style editor: pen, shapes, Shape Builder, Pathfinder, gradients, rulers, guides, and IDs / classes for developers
🎬	SVG animation	An SVGator-style timeline that saves plain CSS / SMIL into the SVG: motion paths, morphing, springs, interactive triggers, and import of existing animation
👁️	Inline CSS previews	Dials after deg, curves after easings, swatches for oklch() / color-mix() / light-dark(), shadow and gradient chips, clamp() graphs, flex and grid layout hovers, with click-to-edit
🧱	Flex & grid tools	Hover any flex or grid property to see the layout, edit it visually, and get warnings for common mistakes
🧩	BEM shortcuts	Option+Q inserts block__element, Option+M adds block--modifier, and class names complete from your SCSS
🧰	Design Studio	OG images, colours from an image, shadow palette, gradient, CSS pattern, layout and blur-placeholder generators
🎞️	Video trimming	Open a video, preview and drag timeline handles to select a range, then export a frame-accurate MP4

🎞️ Video trimming

Run StyleDeck: Trim Video from the Command Palette or right-click a supported video file in the Explorer. Choose the start and end with the draggable timeline handles or the time fields, preview the selection, and export it as an MP4.

Exports use the bundled FFmpeg WebAssembly encoder and re-encode the selected range for frame-accurate cuts. The core is about 32 MB and is loaded locally on the first export; no runtime download or external FFmpeg installation is required. Encoding uses substantial memory for large source videos.

Supported file extensions are .mp4 and .webm; preview playback also depends on the codecs supported by the VS Code webview. The exported video is H.264/AAC in an MP4 container. Third-party licensing details are in THIRD_PARTY_NOTICES.md.

---

🧠 Sass module IntelliSense

VS Code doesn't understand the Sass module system on its own. StyleDeck does.

You type	You get
fn.	Every function, mixin and variable in that namespace
fn.$	The module's variables, correctly prefixed
@include fn.	Mixins scoped to the namespace
fn.rem(	Signature help with parameter names and defaults
Cmd/Ctrl+Click on fn.$color	Jump to the definition, even through @forward
@use "	Path completion with aliases (@/, ~, your own)
@use … as *	Completions without a namespace

• Mixin diagnostics: unknown mixins and calls with the wrong number of arguments are underlined.
• Rename across files: F2 on a $variable or --custom-property renames it everywhere, respecting .gitignore.
• Built-in modules: sass:math, sass:color and the others are documented in completions and hovers.
• Copy @Alias: right-click a file in the Explorer to copy @use "@/styles/…" as name; or a JS import.

---

🔎 Inline values & CodeLens

Small, clickable hints above your code. Every kind can be switched off individually, or all at once from the sidebar.

Where	Shows	Click to
Any line using $var or var(--x)	t.$space: 1rem · 16px · --surface: #fafafa	Copy the variable name (t.$space, --surface)
Token declarations	= 2rem · 32px · 1.5em · ≈ 24px · 24px · 1.5rem	Copy the variable name
@use statements	ƒ 3 functions @ 2 mixins $ 12 variables % 1 placeholder all	Pick a member and copy it: fn.rem(), @include fn.card;, fn.$space
Rules containing px	⇄ 4 px → rem	Convert that rule's px values
Anchored rules	⚓ --trigger · bottom span-right · edit visually	Open the anchor picker

What the value preview understands:

• Variables, including imported and namespaced ones, and chains like $accent: $brand.
• var(--x, fallback).
• Arithmetic, calc(), math.div(), math.round/ceil/floor/abs, min() / max().
• Lists like 0 $space.

It shows nothing rather than guess wrong on mixed units, colors or custom functions. Variables declared inside a rule are marked (local), and unresolved var() fallbacks are marked (fallback).

What the @use lens covers:

• It follows @forward through index files, including as prefix-*, show and hide.
• It skips private -/_ members, and includes built-in sass: modules.
• It flags broken paths with ⚠ can't find "…".

---

👁️ Inline CSS previews

Small icons appear after values in CSS, SCSS, Less and <style> blocks (Vue, Svelte, Astro, HTML). Hover for a larger version.

Value	Icon	Hover
45deg, 0.25turn, 1rad	An angle dial	Large dial and the angle in other units
cubic-bezier(), ease, steps(), linear()	An easing curve	Curve with handles
oklch(), oklab(), lab(), lch(), hwb(), color-mix(), light-dark(), color(), relative colours, var() / $var from the file	A colour swatch	Swatch, hex and an out-of-gamut note
linear-gradient(), radial-gradient(), conic-gradient()	A gradient strip	Larger gradient
box-shadow, text-shadow, drop-shadow()	A shadow card	Full layer stack
clamp()		Graph from 320px to 1440px with sample widths
rem / em		The value in px

Edit visually. Hover an angle or easing and click Edit visually…, or run Edit Angle or Easing at Cursor Visually. A side panel has a draggable dial (Shift snaps to 15°) or bezier handles with presets, and writes to the file live. One undo reverts the whole session.

Each preview has its own switch under scssIntellisense.inlinePreviews.*.

Flex & grid

• Container hovers: hover display, flex-direction, flex-wrap, justify-content, align-items, gap, grid-template-* and similar to see the container drawn, including wrapping, shrinking, repeat(auto-fit, minmax()), named lines and areas.
• Item hovers: flex, order and align-self show the item beside siblings. grid-column, grid-row and grid-area show where the item lands.
• Edit layout visually… (or Edit Flex/Grid Layout at Cursor Visually) opens a panel with controls and a live preview that writes back to the rule.
• Diagnostics: grid properties on a flex container (and the reverse), uneven or non-rectangular grid-template-areas, unknown grid-area names, and flex or grid properties with no display. Turn off with scssIntellisense.layoutDiagnostics.enabled.

---

🧩 BEM

Works in HTML, Astro, Vue, Svelte, JSX / TSX and MDX.

Shortcut (macOS · Windows/Linux)	Where the cursor is	Result
Option+Q · Alt+Q	Between an element's tags	Inserts a child with block__name (type li item to choose the tag)
Option+Q · Alt+Q	Inside an opening tag	Sets the element class to block__name
Option+M · Alt+M	In or on an element	Adds block--name next to the existing class

The block comes from the nearest parent that has a class. It follows your style: class="…", className="…" or CSS modules (className={style.card__title}, written as style["card__title-x"] when needed). Class names also complete from the SCSS the file imports (relative imports) or its <style> block, with &__el and &--mod resolved and the parent's elements first.

---

🧰 Design Studio

Open it from StyleDeck: Open Tools Menu (Cmd/Ctrl+Alt+K) or run any tool from the Command Palette.

Tab	What it does
OG image	Social card generator with layouts, backgrounds, fonts and PNG export
Colours	Palette and colours from the image you have open, as HEX, RGB, HSL and OKLCH, with contrast checks
Shadow	A layered shadow palette, in the style of Josh Comeau's generator
Gradient	Linear, radial and conic gradients
Patterns	CSS-only dots, stripes, grids, checkers, waves and more
Layout	Holy grail, sidebar, auto-fit cards, bento, navbar, split hero, pancake stack and 12 columns, with CSS and Tailwind output
Blur placeholder	Tiny base64 or BlurHash placeholders

Also available: Generate Responsive Images, Generate Favicons, Compress Images, Sanitize File Names in Folder and Import Assets from Folder.

---

⇄ px ⇄ rem

macOS	Windows / Linux
Option + Z	Alt + Z

• Cursor on a value: toggles it, 24px ⇄ 1.5rem.
• Selection: converts every px value in it.
• Cursor elsewhere: converts the whole line.
• Multiple cursors: supported, and each run is a single undo step.
• Left alone: identifiers like $space-16px and .mt-8px.

The per-rule lens is more careful still. It skips selectors, media queries, strings, url(), @function bodies, and px passed to your own functions or mixins (to-rem(24px) stays as it is), while still converting inside calc() and clamp().

Base font size and precision are configurable (16px, 4 decimals by default).

---

⚓ Anchor positioning

Visual picker

Opening it:

• The ⚓ … edit visually lens above anchored rules
• Right-click → Anchor Position Picker
• The ⊙ button in the editor title bar
• The Pick position visually… suggestion in position-area:
• The Edit visually link in a position-area hover

Using it:

• Placing: click a cell to place the element around its anchor. Drag or ⇧-click to span cells, or use a preset: Tooltip, Below, Dropdown, Right, Left, Submenu, Corner, Cover.
• Writing: each change is written into the rule under your cursor immediately, and Cmd/Ctrl+Z undoes it. position: absolute is added when needed.
• Following the cursor: the panel follows your cursor into other rules, like an inspector.
• Anchor: pick one of the anchor-names in your project or create a new one. The panel shows the line to copy onto the anchor element.
• Fallbacks: flip-block, flip-inline or both, plus a preferred order (most-height …).
• Other options: a gap from the anchor, when to hide, absolute / fixed, and physical (top / left) or logical (block / inline) keywords.

IntelliSense

Context	Suggestions
position-anchor:, anchor-scope:	Anchor names from your project, with where they're defined
position-area:	Common placements with a mini grid diagram, all keywords, then only the valid second keyword
position-try-fallbacks:, position-try:	Try tactics, a sensible default chain, your @position-try names
position-try-order:, position-visibility:	Their keywords, explained
top:, left:, inset-*:	anchor() pre-filled with the opposite side
width:, min-height: …	anchor-size()
Inside anchor( / anchor-size(	Sides or sizes, and anchor names
justify-self:, align-self:	anchor-center

Hovers document every anchor property and function, and a position-area hover shows the grid. Snippets: @position-try, anchor-name, position-anchor, @supports-anchor.

Anchor positioning is supported in Chrome and Edge 125+; check other browsers before relying on it.

---

🌀 Scroll animation editor

A visual editor for CSS scroll-driven animations (animation-timeline) and scroll-triggered animations (animation-trigger). It uses your VS Code theme colours.

Opening it:

• The ▷ button in the Tokens sidebar header
• The ▷ button in the editor title bar of a style file
• Right-click → Scroll Animation Editor
• StyleDeck: Scroll Animation Editor in the Command Palette

Using it:

• Timeline source: view() follows an element as it crosses the viewport, scroll() follows the scroll position of a container. Choose vertical or horizontal scrolling.
• Range: pick named ranges (entry, contain, exit, cover …) and percentages, or drag the handles on the range bar.
• Keyframes: one lane per property (opacity, translate, scale, rotate, blur, clip). Click a lane to add a keyframe, drag to move it, arrow keys nudge it, Del removes it.
• Preview: scroll, drag or use the arrow keys on the preview. The Range start and Range end frames show where the animation begins and ends.
• Modes: Scrub ties the keyframes to the scroll position. Trigger starts a timed animation when the element enters the range, with enter and leave actions (play-forwards, play-backwards, reset …).
• Code: View code shows the CSS and HTML. Copy it, open it in a new file, or insert it at the cursor in the last style file you used.

The editor keeps your settings when it's hidden or VS Code restarts.

Scroll-driven animations work in Chrome 115+ and Safari 26+. CSS triggers are new in Chrome 145; the generated code wraps them in @supports, and the preview simulates them.

---

📐 Container & scroll-state queries

Suggestions appear as you type after :, a space or (, with no need for Ctrl+Space.

Context	Suggestions
container-type:	inline-size, size, scroll-state and valid combinations (inline-size scroll-state)
container:, container-name:	A name / type snippet and container names already in your project
@container	Your container names, (width > …), scroll-state(…), style(--x: y), ready-made recipes, then and / or
@container (	width, inline-size, height, block-size, aspect-ratio, orientation with operators
@container style(	Your custom properties and their values
@container scroll-state(	stuck, snapped, scrollable, scrolled, then only the keywords each accepts

Scroll-state recipes:

Query	Use
scroll-state(stuck: top)	Restyle a sticky header once it's pinned
scroll-state(scrollable: top)	Reveal a "scroll to top" button
not scroll-state(scrollable: bottom)	Hide a "more below" hint at the end
scroll-state(snapped: x)	Highlight the active carousel slide
scroll-state(scrolled: bottom)	Hide the header while scrolling down

Hovers explain container properties, scroll-state features and cqi / cqw … units.

---

🎨 Design Tokens sidebar

A live view of every SCSS variable, CSS custom property, mixin, function and placeholder in your project.

• Color palette: swatches for every color, resizable, with export as SCSS, CSS custom properties or JSON.
• @property browser: registered properties grouped by syntax (<color>, <length>, <angle> …) with value swatches.
• Search and filter: by type ($(scss), Colors, Mixins …), plus an Unused filter to find dead tokens.
• Group by file or type.
• Click to copy (var(--x) for custom properties), insert at cursor, or jump to the source.
• Live: updates as you type, no save needed.
• Switches: Scope Helper labels closing braces with their selector, and CodeLens turns all inline lenses on or off.

🖼️ Asset Explorer

A fast browser for images, SVGs, GIFs, videos and fonts.

• Previews in Grid, List or By-type views, with search, type filters and total size.
• Sanitize filenames from card actions or the context menu. Names are converted to lowercase ASCII kebab-case, extensions are preserved, and existing files are never overwritten. Project references are not changed automatically.
• Crop raster images from their card actions or context menu. Drag a crop area and save a PNG copy beside the original (or choose another location); the source is left untouched.
• Copy Import with your project's conventions: public/icons/logo.svg → /icons/logo.svg, src/assets/hero.png → @/assets/hero.png.
• Unused asset detection across every text file in the project, with Select All for bulk cleanup.
• Scanning in the background, so it stays responsive in large repositories.

🌈 Colour panel

A small panel in the StyleDeck sidebar built around an OKLab wheel.

• 3D OKLab wheel: drag to pick; lightness is a separate slider, so hue and chroma stay perceptually even.
• Eyedropper: pick a colour from anywhere on screen.
• Palettes: analogous, complementary, triadic and more, generated in OKLab from the picked colour, or from one you type in.
• Your tokens: every colour variable in the project (SCSS $vars, CSS custom properties, light-dark()), searchable, with the closest match to the picked colour.
• Shade scale: 50–950 steps, copied as SCSS variables, a Sass map or CSS custom properties.
• Contrast and alpha: WCAG contrast against a background, and an alpha slider.
• Open in Colour Wheel: right-click a colour token to open it here.

✏️ SVG editor

Previews in the text editor. When you open an .svg file as text, a thumbnail of the drawing sits in the gutter next to the <svg> line, and an Open in SVG Editor CodeLens (with the drawing's size) sits above it. Hovering the <svg …> tag shows a larger preview. The thumbnails also appear for inline <svg> in HTML, Vue, Svelte, Astro, Markdown, PHP and JSX.

Right-click an .svg file and choose Open in SVG Editor (or Reopen With… → StyleDeck SVG Editor). The file stays the source of truth: every change is a normal text edit, so VS Code's undo/redo, Git diffs and the text view beside it all keep working.

Drawing and paths

• Selection (V) and Direct selection (A) with Illustrator behaviour: marquee, Shift adds, Alt-drag duplicates, double-click enters a group, and smart guides with measurements.
• Pen (P), Add / Delete / Convert anchor point (+, −, Shift+C), Pencil (N), Scissors (C), and point editing with smooth and corner handles.
• Rectangle (M) with live corners, Ellipse (L), Polygon and Star (↑/↓ while dragging), Line (\), Text (T).
• Rotate (R), Scale (S) and Reflect (O) tools: click to set the reference point ◎, drag to transform, Alt-drag to transform a copy, then Ctrl/⌘+D to repeat it (Transform Again).
• Shape Builder (Shift+M): drag across overlapping areas to merge them; Alt-drag deletes areas.
• Pathfinder: unite, minus front, intersect, exclude and divide. Also compound paths, clipping masks, outline stroke, offset path, simplify, smooth, reverse, close and join.
• Eyedropper (I) copies fill, stroke and text style between objects.

Colour and layout

• Illustrator's fill / stroke swatches (X, Shift+X, D, /), swatches from the file and your project's colour tokens.
• Linear and radial gradients with an on-canvas annotator and a stop bar.
• Align and distribute, X / Y / W / H / rotation / skew fields with scrubbable labels.
• Rulers, drag-out guides, grid, snapping, outline view (Ctrl/⌘+Y), a transparency grid, and a fit-artboard-to-artwork command.

CSS variables for colours

• Click { } beside Fill or Stroke to link the colour to a variable. You can pick one already in the SVG, pick one of your project's CSS variables (used with a fallback, e.g. var(--brand-500, #3b82f6)), or create a new one from the current colour, for this object only or for every use of that colour in the drawing.
• When a colour is linked, its swatch edits the variable, so every object that uses it changes together. Unlink puts the plain colour back.
• The CSS variables section lists every variable in the SVG (from any <style> or style="--x: …"), with a live colour swatch, rename (all uses update), value, a usage count (click it to select those objects), copy, apply to the selection, and remove (objects keep their colour).
• All colours → variables gives every colour in the drawing its own variable in one go, named after a matching project token where there is one.
• Colours are written with their value as the fallback, e.g. fill="var(--color-2, #0e0606)", and nothing is defined inside the SVG. The file shows its own colours anywhere (even as an <img>). When it's inline in a page, setting the variable on the <svg> or any parent recolours it: .header { --color-2: rebeccapurple }. Copy for my CSS copies a ready-made rule. Files from the previous version, which defined the variables on the <svg> itself, show a one-click Use fallbacks instead.

Placing other SVGs and images

• Click Place in the top bar (or right-click the canvas → Place SVG or image…) and pick files, or drag them onto the canvas. From VS Code's Explorer, hold Shift while dropping (VS Code's rule for editors like this one).
• SVGs come in as editable groups, scaled to their size. Their <defs> move into the document's defs, and clashing ids (gradients, clip paths …) are renamed along with every reference to them.
• PNG, JPG, GIF, WebP and AVIF come in as <image>. Choose Link (a relative path such as assets/photo.png, which keeps the SVG small) or Embed (the image is stored inside the SVG, which works anywhere). Linked images show in the editor and are saved as plain relative paths.
• Anything bigger than the artboard is scaled down to fit. Paste (Ctrl/⌘+V) also works for SVG code copied from anywhere.

Made for developers

• Edit IDs and classes, copy CSS selectors, and Reveal in code to jump to the element in the text.
• A layers tree with rename, drag-to-reorder, lock and hide.
• The UI follows your VS Code theme (colours, fonts, focus rings) and the same styling as the other StyleDeck panels.

🎬 SVG animation

Click the film icon to open the timeline. The layout follows SVGator: every element in a tree, and one animator row per animated property. Each row shows the value at the playhead with ◀ ◆ ▶ buttons to jump to the previous keyframe, add or remove one, and jump to the next.

• Animators: position, motion path, rotation, scale, skew, opacity, blur, fill, gradient colours, stroke, stroke width, line drawing and shape morph. Add them with + Animate or the + on an element row.
• Auto-key: with the record button on, moving, rotating or resizing on the canvas, or editing points, records keyframes at the playhead.
• Motion paths: drawn on the canvas with editable points and Bézier handles, and a dot per frame so you can see the speed. Position keyframes show a trail whose handles bend the movement into a curve. You can also Animate along path using any path in the drawing.
• Transform origin: the pivot is shown as ◎ on the selected object. Drag it anywhere; it snaps to the corners, edges and centre of the object's box. Rotation and scale happen around it.
• Keyframes: drag to retime, drag across empty space to box-select, stretch a selection with the handles on its box, and right-click for easing, copy/paste, reverse, distribute and more.
• Easing: 17 curves, a hold (step) ease and 6 springs. The editor has draggable Bézier handles, number fields, stiffness / damping / mass sliders and a live preview.
• Playback: loop, play a set number of times, ping-pong, respect reduced motion, and per element "play once, then hold".
• Interactive triggers: start on load, on hover, on click or when scrolled into view, for the whole SVG or for one element (such as a button). Hover is pure CSS; click and scroll add a tiny embedded script. Use Preview to try them in the editor.
• Presets: fade, slide, pop, drop, pulse, bounce, wiggle, spin, blur and draw line, staggered across a multi-selection.

What's saved. Everything is written into the SVG itself: @keyframes CSS (individual translate / rotate / scale properties, offset-path for motion paths, linear() for springs), SMIL <animate> for morphs, and the timeline data in <metadata>. The file plays anywhere without StyleDeck. Hover and on-load triggers work even as an <img>. Click and scroll triggers need the SVG inline or in <object>.

Importing animation made elsewhere. Open an SVG that already has CSS @keyframes or SMIL (<animate>, <animateTransform>, <animateMotion>, <set>), for example a hand-written loader or an SVGator CSS export, and click Import animation. Transforms are rebuilt around the file's own transform-origin, and delays, repeat counts, directions, fill modes and easing are unrolled onto the timeline. Only what was converted is removed from the file; anything that can't be represented keeps playing and is listed. SVGator's JavaScript-player exports can't be imported.

⌨️ SVG editor shortcuts

Press ? in the editor for the full list. The Mac equivalents use ⌘ and ⌥.

Timeline keyframes (hover the timeline): Ctrl+C copy, Ctrl+X cut, Ctrl+V paste at the playhead, Ctrl+D duplicate after the selection. Paste goes onto the selected objects (or back onto the originals), extends the duration if needed, and selects the pasted keys. The same actions are in the keyframe right-click menu.

Tools		Edit & object
V / A	Selection / Direct selection	Ctrl+Z / Ctrl+Shift+Z	Undo / redo
P / + / − / Shift+C	Pen / add / delete / convert anchor	Ctrl+C X V	Copy, cut, paste (to the centre of the view)
N / C	Pencil / Scissors	Ctrl+F / Ctrl+B / Ctrl+Shift+V	Paste in front / in back / in place
M / L / \ / T	Rectangle / Ellipse / Line / Text	Ctrl+D	Transform again
R / S / O	Rotate / Scale / Reflect	Ctrl+G / Ctrl+Shift+G	Group / ungroup
Shift+M	Shape Builder	Ctrl+] [ (+Shift)	Arrange forward / back (front / back)
I	Eyedropper	Ctrl+2 / Ctrl+Alt+2	Lock / unlock all
H or hold Space	Hand	Ctrl+3 / Ctrl+Alt+3	Hide / show all
Z (Alt zooms out)	Zoom	Ctrl+8 / Ctrl+7 (+Alt releases)	Compound path / clipping mask
X / Shift+X / D / /	Fill-stroke focus / swap / default / none	Ctrl+J / Ctrl+Shift+O	Join / create outlines

View		Animation (timeline open)
Ctrl+0 / Ctrl+1 / Ctrl+±	Fit / 100% / zoom	Space	Play / pause
Ctrl+Y	Outline view	K	Keyframe the selection
Ctrl+R / Ctrl+' / Ctrl+;	Rulers / grid / guides	, / .	Previous / next frame
Ctrl+U	Smart guides	← / →	Nudge selected keyframes
Ctrl+H / Ctrl+Shift+B	Hide edges / bounding box	Ctrl+C / Ctrl+V	Copy / paste keyframes
Ctrl+Shift+D	Transparency grid	Delete	Delete keyframes
Tab / Shift+Tab / F7	Hide panels / side panels / layers	Esc	Stop preview

---

Commands

Command	Shortcut
StyleDeck: Convert px ⇄ rem	Option+Z (macOS) · Alt+Z (Windows/Linux)
StyleDeck: Anchor Position Picker	Right-click menu · editor title bar
StyleDeck: Scroll Animation Editor	Tokens sidebar header · editor title bar · right-click menu
StyleDeck: Toggle CodeLens	Also a switch in the Tokens sidebar
StyleDeck: Why Are CodeLenses Not Showing?	Checks settings and the current file, and reports in the Output panel
SCSS IntelliSense: Toggle Scope Helper	Also a switch in the Tokens sidebar
SCSS Explorer: Refresh Symbols / Export Color Palette / Open Asset Explorer
Copy @Alias	Right-click a file in the Explorer
StyleDeck: Open Tools Menu	Cmd+Alt+K (macOS) · Ctrl+Alt+K
StyleDeck: Edit Angle or Easing at Cursor Visually	Cursor on an angle or easing
StyleDeck: Edit Flex/Grid Layout at Cursor Visually	Cursor inside a flex or grid rule
StyleDeck: BEM: Add Element Class / Add Modifier Class	Option+Q / Option+M (macOS) · Alt+Q / Alt+M
StyleDeck: Social (OG) Image · Pick Colours from Image · Shadow · Gradient · CSS Pattern · Flex & Grid Layout · Blur Placeholder	Open the matching Design Studio tab
StyleDeck: Generate Responsive Images · Generate Favicons · Compress Images
Open in SVG Editor	Right-click an .svg file · Reopen With…
Open in Colour Wheel	Right-click a colour token

Settings

Setting	Default	Description
scssIntellisense.pathAliases	{ "@": "./src", … }	Aliases for @use paths and imports
scssIntellisense.includePaths	["node_modules", "src/styles"]	Extra folders to resolve @use from
scssIntellisense.pxToRem.baseFontSize	16	Root font size for px ⇄ rem and value previews
scssIntellisense.pxToRem.precision	4	Decimal places in converted values
scssIntellisense.codeLens.enabled	true	All StyleDeck CodeLenses
scssIntellisense.codeLens.usageValues	true	Values above lines that use a variable
scssIntellisense.codeLens.valuePreview	true	Computed values on token declarations
scssIntellisense.codeLens.moduleMembers	true	Member lists on @use
scssIntellisense.codeLens.pxToRem	true	⇄ px → rem lens on rules
scssIntellisense.codeLens.anchorPicker	true	⚓ edit visually lens on anchored rules
scssIntellisense.diagnostics.mixinCalls.enabled	true	Unknown mixin / argument count warnings
scssIntellisense.scopeHelper.enabled	false	Selector labels on closing braces
scssIntellisense.inlinePreviews.angle / easing / color / gradient / shadow / clamp / grid / layout / remToPx	true	Each inline preview and hover, individually
scssIntellisense.layoutDiagnostics.enabled	true	Flex and grid mistake warnings
scssIntellisense.svg.gutterPreview	true	SVG thumbnails in the gutter (files and inline <svg>)
scssIntellisense.codeLens.svgEditor	true	"Open in SVG Editor" lens at the top of .svg files
scssIntellisense.ignore.respectGitignore	true	Skip .gitignored files in scans (node_modules, dist … are always skipped)

CodeLenses also need VS Code's own Editor: Code Lens setting to be on. If lenses don't appear, run StyleDeck: Why Are CodeLenses Not Showing?

Requirements

• VS Code 1.75 or newer.
• Sass projects using @use / @forward get the most out of it; plain CSS works too.

Feedback

Found a bug or have an idea? Open an issue.

License: MIT