CSS Preprocessors & Modern CSS Features

Sass/SCSS, Less, Stylus features; modern CSS (CSS Variables, Grid, Flexbox, Container Queries, Cascade Layers).

Web Technologies
10 entries
CC0 — public domain

JSON11,065 B
YAML8,240 B · −26%
TOON7,495 B · −32%

CSS preprocessors and the modern CSS features that replaced many of their uses: Sass/SCSS, Less, Stylus, custom properties, Grid, Flexbox, container queries, cascade layers, logical properties and the flexbox gap, each with key features, example code and notes.

Use it when

You are deciding whether you still need a preprocessor.
You need an example of a modern CSS feature.

Watch out for

Some modern features have uneven support; use feature queries for fallbacks.
Preprocessors still offer functions, loops and mixins that CSS lacks.

The data

Topics

Name	Category	Description	Key features	Example code	Notes
Sass/SCSS	preprocessor	Syntactically Awesome Style Sheets - extends CSS with variables, nesting, mixins, and functions.	Variables ($primary-color: blue) Nesting for hierarchical selectors Mixins for reusable style blocks Functions and operations Partials and @import for modularity Inheritance with @extend	$color: #333; .button { background: $color; &:hover { opacity: 0.8; } }	Most widely adopted preprocessor. Two syntaxes: SCSS (CSS-compatible) and indented Sass.
Less	preprocessor	Leaner Style Sheets - similar to Sass but with some different syntax choices and features.	Variables (@color: #4D926F) Nesting similar to Sass Mixins with @mixin and .mixin-name Operations (color manipulation, math) Guards and recursive mixins JavaScript evaluation inside .less files	@color: #4D926F; #header { color: @color; } .button { .mixin; }	Historically popular in Bootstrap 3. Still used but Sass has larger market share today.
Stylus	preprocessor	Highly flexible CSS preprocessor with optional brackets/semicolons and powerful plugin system.	Omits optional braces/semicolons Powerful built-in functions Plugin architecture (Nib, Kouto Swiss) Automatic vendor prefixing Supports both JS and CSS-like syntax	color = #333 .button background color &:hover opacity 0.8	Less mainstream. Popular in Node.js circles. Very flexible but syntax choices can harm readability.
CSS Variables (Custom Properties)	modern-css	Native CSS variables that cascade and inherit, enabling dynamic theming without preprocessors.	Scoped to element or inherited Can be changed at runtime with JavaScript Cascade-aware (respects inheritance) Works with calc() and other functions --prefix naming convention	:root { --primary: #007bff; } .button { background: var(--primary); } .dark { --primary: #0d6efd; }	No build step needed. Much more powerful than preprocessor variables because they cascade and can be modified dynamically.
CSS Grid	modern-css	Two-dimensional layout system for rows and columns simultaneously, replacing complex float/inline-block hacks.	grid-template-columns/rows for tracks grid-template-areas for named layout gap property for gutters Auto-placement and alignment Implicit and explicit grids	.container { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; }	Perfect for page-level layouts, dashboards, and card grids. IE11 has partial support; all modern browsers fully support.
Flexbox	modern-css	One-dimensional layout model for distributing space along a single axis (row or column).	flex-direction for main axis justify-content and align-items flex-grow, flex-shrink, flex-basis flex-wrap for wrapping order property	.container { display: flex; justify-content: center; align-items: center; }	Ideal for navigation bars, centering content, equal-height columns, and component-level layout.
Container Queries	modern-css	Query-based styling based on a container's size rather than viewport, enabling truly reusable components.	@container rule and container-type container-name for scoping Queries: min-width, max-width, etc. Component-level responsiveness Works with both Grid and Flexbox	.card { container-type: inline-size; } @container (min-width: 400px) { .card { grid-template-columns: 1fr 1fr; } }	Game-changer for design systems. Supported in Chrome 105+, Safari 16+, Firefox 110+. Prefixed with @container for older.
Cascade Layers (@layer)	modern-css	Explicitly manage CSS cascade order with named layers, resolving specificity wars and enabling safer overrides.	@layer declaration for creating layers Ordered cascade independent of specificity Layer stacking with @layer name Unlayered styles always win (higher priority) Useful for CSS frameworks and themes	@layer reset, base, components, utilities; @layer base { body { font-family: system-ui; } }	Great for libraries and design systems. Prevents accidental overrides and improves maintainability.
Logical Properties (writing-mode aware)	modern-css	Physical directions (left/right) replaced by logical ones (start/end) for internationalization and vertical writing modes.	margin-inline-start vs margin-left padding-block vs padding-top/bottom border-inline-end, text-align: start Works with RTL and vertical text	.box { margin-inline-start: 1rem; padding-block: 1rem; }	Critical for internationalization (RTL languages like Arabic/Hebrew) and vertical writing (Japanese, Chinese).
Flexbox Gap	modern-css	Native gap support for flex containers (previously only available in Grid), simplifying spacing between flex items.	gap, row-gap, column-gap on flex containers No more margin hacks or :last-child selectors Consistent with Grid syntax Supported in all modern browsers	.nav { display: flex; gap: 1rem; }	Long-awaited feature that makes flexbox spacing trivial. Was not supported in Flexbox until recently (2020+).

Fields

The shape of this dataset, read from the data itself: every column, its type and a real value. Agents can use this to plan a query without fetching the whole document.

Section	Field	Type	Example
topics	`name`	string	Sass/SCSS
topics	`category`	string	preprocessor
topics	`description`	string	Syntactically Awesome Style Sheets - extends CS…
topics	`key_features`	array	[6 items]
topics	`example_code`	string	$color: #333; .button { background: $color; …
topics	`notes`	string	Most widely adopted preprocessor. Two syntaxes:…

Fetch the same bytes

The static files contain the same reference rows as the API, with no API rate limit. Live metadata, such as view counts, may differ. Use the API for content negotiation; use the static files for a cacheable snapshot.

curl "https://yjtoon.yunusemrevurgun.com/api/dataset/css-preprocessors-modern-css?format=toon"

const res = await fetch(
  "https://yjtoon.yunusemrevurgun.com/static-data/dataset/css-preprocessors-modern-css.toon"
);
const toon = await res.text();

Rate limit: 120 requests per minute per IP, no key and no signup. API reference →