General
Directory Structure
Organise SCSS files into a clear hierarchy:
1scss/
2├── abstracts/ # Variables, functions, mixins
3│ ├── _colours.scss
4│ ├── _breakpoints.scss
5│ ├── _sizes.scss
6│ ├── _tokens.scss
7│ ├── _mixins.scss
8│ └── _functions.scss
9├── base/ # Global styles
10│ ├── _reset.scss
11│ ├── _root.scss
12│ ├── _fonts.scss
13│ ├── _global.scss
14│ └── _typography.scss
15├── components/ # Component styles
16└── util/ # Utility styles
17└── app.scss # Entry point
Key Patterns
- Use
@useinstead of@import: Import abstracts with aliases (e.g.,@use '../scss/abstracts' as a;). - Variable naming: Use kebab-case (e.g.,
$section-75,$border-radius-4). - CSS variable naming: Use
--kebab-case(e.g.,--token-text-heading). - Parent selector: Use
$self: &;for compound selectors. - Nesting: Nest related modifiers but avoid deep nesting (max 3 levels).
Breakpoint Mixin
Use breakpoint mixins for responsive design:
1@use '../abstracts' as a;
2
3.component {
4 font-size: 16px;
5
6 @include a.mq(tab) {
7 font-size: 18px;
8 }
9
10 @include a.mq(desk) {
11 font-size: 20px;
12 }
13}
Colour System
Define colours as maps and generate CSS variables:
1$colours: (
2 'red': (
3 '50': #fef2f2,
4 '500': #ef4444,
5 '900': #7f1d1d,
6 ),
7 'blue': (
8 '50': #eff6ff,
9 '500': #3b82f6,
10 '900': #1e3a8a,
11 ),
12)
13
14// Used in :root as CSS variables
15--colour-red-50: #fef2f2;
16--colour-blue-500: #3b82f6;
Scoped Component Styles
When using component-scoped SCSS in Svelte:
1<style lang="scss">
2 @use '../scss/abstracts' as a;
3
4 .btn-card {
5 padding: a.$spacing-4;
6 border-radius: a.$border-radius-2;
7
8 &--dark-mode {
9 background: var(--colour-grey-900);
10 color: var(--colour-white);
11 }
12 }
13</style>