api: YAML JSON TOON Database
version: 1.0.0
format: toon
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[2]: You are deciding whether you still need a preprocessor.,You need an example of a modern CSS feature.
  caveats[2]: Some modern features have uneven support; use feature queries for fallbacks.,"Preprocessors still offer functions, loops and mixins that CSS lacks."
  related[3]: css-layout-systems,browser-web-apis-reference,javascript-es6-features
  entry_count: 10
  fields[6]{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;\n.button {\n  background: $color;\n …"
    topics,notes,string,"Most widely adopted preprocessor. Two syntaxes:…"
  category: Web Technologies
  category_slug: web-technologies
  tags: "css,sass,less,modern-css,preprocessors,layout"
  view_count: 48
  created_at: 1777673262
  updated_at: 1777673262
data:
  topics[10]:
    - name: Sass/SCSS
      category: preprocessor
      description: "Syntactically Awesome Style Sheets - extends CSS with variables, nesting, mixins, and functions."
      key_features[6]: "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[6]: "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[5]: 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[5]: 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[5]: 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[5]: 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[5]: @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[5]: @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[4]: 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[4]: "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+).