When Sass Colours Break After a Next.js Production Build
Diagnose Sass colours that survive compilation but break in Next.js production CSS when minification creates invalid mixed‑unit legacy rgb() values.
Articles
CSS
Almost as old as front‑end development itself, CSS is a stylesheet language that describes the presentation of an HTML or XML document. We write CSS to describe how elements should be rendered and animated on‑screen, when printed, in speech, or in other media. In web development, writing CSS is an underappreciated skill that not many fully master.
When Sass Colours Break After a Next.js Production Build. 
Container Queries in CSS. Container Queries in CSS
CSS container queries let components respond to an ancestor container's size. I explain query containers, responsive components, and browser fallbacks.
CSS aspect-ratio for Responsive Layouts. CSS
aspect-ratiofor Responsive LayoutsThe CSS
aspect-ratioproperty makes it easier to maintain consistent proportions in responsive layouts. Here, I explore how it works and when to use it.
Control CSS Container Layouts with place-content. Control CSS Container Layouts with
place-contentUse CSS place‑content to align grid and flex content, comparing align‑content, justify‑content, place‑items, syntax, examples, and layout limits.
Simplify Your Layout CSS with place-items. Simplify Your Layout CSS with
place-itemsCSS
place-itemsis a shorthand property that aligns items inside grid and flex containers. Here, we discuss its syntax, use cases, and practical examples.
Understanding the CSS :where() Function. Understanding the CSS
:where()FunctionThe CSS
where()function groups selectors without specificity, simplifying overrides. Here, I explain its use, benefits, and why it can reduce code clarity.
Dynamic Sizing with CSS clamp(). Dynamic Sizing with CSS
clamp()Use CSS clamp() for fluid typography, spacing, and layouts with clear minimums and maximums, plus media‑query trade‑offs and responsive examples.
Understanding Transient Props in styled-components. Understanding Transient Props in
styled-componentsUse transient props in
styled-componentsto keep styling‑only props out of the DOM, clean React output, and support safer component migration work.
Dynamic Sizing with CSS max(). Dynamic Sizing with CSS
max()Use CSS max() for responsive sizing, spacing, and layout decisions where the browser should choose the larger value within a fluid design without JavaScript.
Dynamic Sizing with CSS min(). Dynamic Sizing with CSS
min()In CSS, the
min()function allows us to set the smallest value from a set as the value of a CSS property. This can be hugely useful in responsive development.
Dynamic Calculations in CSS Using calc(). Dynamic Calculations in CSS Using
calc()A discussion on how to use CSS calc() for dynamic calculations directly within your styles. Learn to mix units, perform calculations, and improve responsivity.
Creating Custom Viewport Units Instead of Using vh and vw. Creating Custom Viewport Units Instead of Using
vhandvwUse JavaScript and CSS custom properties for viewport sizing, with working CSS fallbacks and clear limits around browser controls, keyboards, and scrollbars.
Enhancing Web Typography with text-wrap: balance. Enhancing Web Typography with
text-wrap: balanceExploring the synergy of
text-wrap: prettyandtext-wrap: balancein web typography, enhancing text aesthetics and readability in different contexts.
The Power of text-wrap: pretty. The Power of
text-wrap: prettyHow
text-wrap: prettycan improve paragraph wrapping in CSS, with practical examples, browser‑dependent results, and a progressive enhancement approach.
Trigonometric Functions in CSS. Trigonometric Functions in CSS
CSS trigonometric functions open up more expressive layout and animation patterns. This guide covers sin(), cos(), tan(), and practical examples.
Commenting in Front‑End Languages. Commenting in Front‑End Languages
There are essentially two different types of commenting in development languages: single‑line, and multi‑line. Here, we discuss these, and how to use them.
The will-change Property in CSS. The
will-changeProperty in CSSThe CSS will‑change property signals that an element may change, allowing the browser to prepare rendering work, although it should only be used selectively.
Using CSS Logical Properties for Direction‑Aware Layouts. Using CSS Logical Properties for Direction‑Aware Layouts
Use CSS logical properties for LTR, RTL, and vertical layouts. Map block and inline axes, position components, order fallbacks, and verify support.