CSS / SASS
Browse all CSS / SASS snippets and helpers.
CSS Child Selectors
Learn 5 CSS selectors for styling child elements — descendant, direct child, adjacent sibling, attribute, and state-based selectors with beginner-friendly examples.
SCSS Breakpoint Mixin with Map
A reusable SCSS breakpoint mixin using sass:map. Define breakpoints once, use them everywhere with @include bp() for clean responsive styles.
Centralize All Z-index Values
Z-index bugs are some of the most painful to debug. Never write a raw z-index number again.
The Getter Function for Maps
Don't use map-get($colors, "primary") everywhere. It’s verbose and ugly. Write a simple wrapper function instead.
The "Quantity Query" Mixin
You can style an element based on how many siblings it has (e.g., "if there are 4 items, make them 25% width; if there are 3, make them 33%").
SCSS Color Palette Generator
Generate an entire monochromatic palette from a single base color using a loop.
Automatic Transition Wrapper
Stop writing transition: all 0.3s ease-in-out on every hover. Use a mixin that defaults to your brand's specific timing and easing curves.
Fluid Scale Mixin
This mixin automates the math. You just tell it which "level" of the scale you want, and it handles the rest.