{ "api": "YAML JSON TOON Database", "version": "1.0.0", "format": "json", "dataset": { "id": 32, "slug": "css-preprocessors-modern-css", "title": "CSS Preprocessors & Modern CSS Features", "description": "Sass/SCSS, Less, Stylus features; modern CSS (CSS Variables, Grid, Flexbox, Container Queries, Cascade Layers).", "summary": "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_when": [ "You are deciding whether you still need a preprocessor.", "You need an example of a modern CSS feature." ], "caveats": [ "Some modern features have uneven support; use feature queries for fallbacks.", "Preprocessors still offer functions, loops and mixins that CSS lacks." ], "related": [ "css-layout-systems", "browser-web-apis-reference", "javascript-es6-features" ], "category": "Web Technologies", "category_slug": "web-technologies", "tags": "css,sass,less,modern-css,preprocessors,layout", "view_count": 0, "created_at": 1777673262, "updated_at": 1777673262, "entry_count": 10, "fields": [ { "section": "topics", "field": "name", "type": "string", "example": "Sass/SCSS" }, { "section": "topics", "field": "category", "type": "string", "example": "preprocessor" }, { "section": "topics", "field": "description", "type": "string", "example": "Syntactically Awesome Style Sheets - extends CS…" }, { "section": "topics", "field": "key_features", "type": "array", "example": "[6 items]" }, { "section": "topics", "field": "example_code", "type": "string", "example": "$color: #333;\n.button {\n background: $color;\n …" }, { "section": "topics", "field": "notes", "type": "string", "example": "Most widely adopted preprocessor. Two syntaxes:…" } ] }, "data": { "topics": [ { "name": "Sass/SCSS", "category": "preprocessor", "description": "Syntactically Awesome Style Sheets - extends CSS with variables, nesting, mixins, and functions.", "key_features": [ "Variables ($primary-color: blue)", "Nesting for hierarchical selectors", "Mixins for reusable style blocks", "Functions and operations", "Partials and @import for modularity", "Inheritance with @extend" ], "example_code": "$color: #333;\n.button {\n background: $color;\n &:hover { opacity: 0.8; }\n}", "notes": "Most widely adopted preprocessor. Two syntaxes: SCSS (CSS-compatible) and indented Sass." }, { "name": "Less", "category": "preprocessor", "description": "Leaner Style Sheets - similar to Sass but with some different syntax choices and features.", "key_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" ], "example_code": "@color: #4D926F;\n#header { color: @color; }\n.button { .mixin; }", "notes": "Historically popular in Bootstrap 3. Still used but Sass has larger market share today." }, { "name": "Stylus", "category": "preprocessor", "description": "Highly flexible CSS preprocessor with optional brackets/semicolons and powerful plugin system.", "key_features": [ "Omits optional braces/semicolons", "Powerful built-in functions", "Plugin architecture (Nib, Kouto Swiss)", "Automatic vendor prefixing", "Supports both JS and CSS-like syntax" ], "example_code": "color = #333\n.button\n background color\n &:hover opacity 0.8", "notes": "Less mainstream. Popular in Node.js circles. Very flexible but syntax choices can harm readability." }, { "name": "CSS Variables (Custom Properties)", "category": "modern-css", "description": "Native CSS variables that cascade and inherit, enabling dynamic theming without preprocessors.", "key_features": [ "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" ], "example_code": ":root { --primary: #007bff; }\n.button { background: var(--primary); }\n.dark { --primary: #0d6efd; }", "notes": "No build step needed. Much more powerful than preprocessor variables because they cascade and can be modified dynamically." }, { "name": "CSS Grid", "category": "modern-css", "description": "Two-dimensional layout system for rows and columns simultaneously, replacing complex float/inline-block hacks.", "key_features": [ "grid-template-columns/rows for tracks", "grid-template-areas for named layout", "gap property for gutters", "Auto-placement and alignment", "Implicit and explicit grids" ], "example_code": ".container {\n display: grid;\n grid-template-columns: 1fr 300px;\n gap: 1rem;\n}", "notes": "Perfect for page-level layouts, dashboards, and card grids. IE11 has partial support; all modern browsers fully support." }, { "name": "Flexbox", "category": "modern-css", "description": "One-dimensional layout model for distributing space along a single axis (row or column).", "key_features": [ "flex-direction for main axis", "justify-content and align-items", "flex-grow, flex-shrink, flex-basis", "flex-wrap for wrapping", "order property" ], "example_code": ".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}", "notes": "Ideal for navigation bars, centering content, equal-height columns, and component-level layout." }, { "name": "Container Queries", "category": "modern-css", "description": "Query-based styling based on a container's size rather than viewport, enabling truly reusable components.", "key_features": [ "@container rule and container-type", "container-name for scoping", "Queries: min-width, max-width, etc.", "Component-level responsiveness", "Works with both Grid and Flexbox" ], "example_code": ".card {\n container-type: inline-size;\n}\n@container (min-width: 400px) {\n .card { grid-template-columns: 1fr 1fr; }\n}", "notes": "Game-changer for design systems. Supported in Chrome 105+, Safari 16+, Firefox 110+. Prefixed with @container for older." }, { "name": "Cascade Layers (@layer)", "category": "modern-css", "description": "Explicitly manage CSS cascade order with named layers, resolving specificity wars and enabling safer overrides.", "key_features": [ "@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" ], "example_code": "@layer reset, base, components, utilities;\n\n@layer base {\n body { font-family: system-ui; }\n}", "notes": "Great for libraries and design systems. Prevents accidental overrides and improves maintainability." }, { "name": "Logical Properties (writing-mode aware)", "category": "modern-css", "description": "Physical directions (left/right) replaced by logical ones (start/end) for internationalization and vertical writing modes.", "key_features": [ "margin-inline-start vs margin-left", "padding-block vs padding-top/bottom", "border-inline-end, text-align: start", "Works with RTL and vertical text" ], "example_code": ".box {\n margin-inline-start: 1rem;\n padding-block: 1rem;\n}", "notes": "Critical for internationalization (RTL languages like Arabic/Hebrew) and vertical writing (Japanese, Chinese)." }, { "name": "Flexbox Gap", "category": "modern-css", "description": "Native gap support for flex containers (previously only available in Grid), simplifying spacing between flex items.", "key_features": [ "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" ], "example_code": ".nav {\n display: flex;\n gap: 1rem;\n}", "notes": "Long-awaited feature that makes flexbox spacing trivial. Was not supported in Flexbox until recently (2020+)." } ] } }