SCSS API
Mixins
SCSS mixins for gradients, layout, spacing, media queries, and components.
Import the mixins module, then @include what you need. (Colorffy's old SCSS functions have been migrated to native CSS relative-color syntax, so there's no functions module to import.)
@use '@colorffy/css/scss/abstracts/mixins' as m;
.hero {
@include m.text-gradient(45deg, #ff0080, #ff8c00);
}
Gradients & text
| Mixin | Signature | Purpose |
|---|---|---|
text-gradient | ($deg: 45deg, $colors...) | Gradient-filled text (uses oklch where supported). |
bg-gradient | ($deg: 45deg, $colors...) | Gradient background. |
text-wrap-pretty | () | text-wrap: balance → pretty progressive enhancement. |
text-variable | ($bold: false) | Apply variable-font heading settings. |
.title {
@include m.text-gradient(90deg, var(--theme-primary-base), var(--theme-accent-base));
}
.panel {
@include m.bg-gradient(120deg, #5300fa, #ee5aaf);
}
Layout & grid
| Mixin | Signature | Purpose |
|---|---|---|
container / container-fluid | () | Responsive / full-width container. |
make-row | () | Flexbox row wrapper. |
make-col | ($size, $columns: 12) | Column width out of N. |
make-grid-cols / make-grid-rows | ($n) | repeat($n, 1fr) tracks. |
make-grid-span | ($span) | grid-column: span $span. |
make-grid-auto | ($type, $size) | auto-fit / auto-fill columns. |
make-gap | ($direction, $size) | Row / column gap. |
container-island | ($position, $edge, $offset) | Floating pill container. |
.layout {
display: grid;
@include m.make-grid-cols(3);
@include m.make-gap('inline', 1rem);
}
Spacing, radius & opacity
| Mixin | Signature |
|---|---|
make-margin | ($direction, $size) |
make-padding | ($direction, $size) |
make-radius | ($direction, $radius) — t / r / b / l |
opacity | ($level) |
Media queries
.sidebar {
// min-width (mobile-first); keys: sm md lg xl xxl
@include m.media-breakpoint-up(lg) {
width: 18rem;
}
// max-width; keys from $breakpoints (e.g. 1024, 768)
@include m.media-query(768) {
display: none;
}
}
Borders & glow
| Mixin | Signature | Purpose |
|---|---|---|
gradient-glow-border | ($colors...) | Animated conic glow border (via ::before / ::after). |
gradient-static-border | ($angle, $colors...) | Static gradient border. |
gradient-btn-border | ($angle, $colors...) | Gradient border sized for buttons. |
Component helpers
Lower-level mixins used to build Colorffy's own components — handy when theming or extending them:
btn-base(), btn-tonal($tonal, $color, $isDark), btn-size($size), ripple-color($color), form-placeholder($opacity), make-image($size), absolute-icon($top, $left), container-tonal($tonal, $color, $isDark, $isBordered, $prefix).
The tonal-generation mixins (
surface-light-tones, semantic-light-tones, surface-dark-tones, semantic-dark-tones, primary-fixed-colors) run once inside :root to emit the tonal tokens — you normally consume those CSS variables rather than calling these directly.