api: YAML JSON TOON Database version: 1.0.0 format: yaml dataset: id: 2774 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 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:…" category: Web Technologies category_slug: web-technologies tags: css,sass,less,modern-css,preprocessors,layout view_count: 58 created_at: 1777673262 updated_at: 1777673262 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+).