slides.oddbird.net/mixins/cssday/

CSS Functions & Mixins Is Sass Dead Yet?

slides.oddbird.net/mixins/cssday/

Miriam Suzanne @ CSS Day, NL

How many of you Wrote CSS Before Nesting?

(Baseline 2023)

How many of you Wrote CSS Before Nesting
and Color-Mix()?

(Baseline 2023)

How many of you Wrote CSS Before Nesting
and Color-Mix()
Wrote CSS Before Custom Props?

(Baseline 2017)

How many of you Wrote CSS Before Nesting
and Color-Mix()
Wrote CSS Before Custom Props
Wrote CSS Before Sass
Built Sites Before CSS
Built Sites Before <font>
Are Really Old?

Things… Used to be Simpler

No Deep-Nesting
No Color Spaces
No Variables
No Build Steps…

The second browser, a text-only terminal with numbered links for keyboard control

Things were also… Way More Complicated

Inspecting the 1996 SpaceJam site to show a complex table layout with extra spacers to make a circle
Exporting slices of an airplane takeoff from Photoshop, we can see the DreamWeaver table code that will be generated

lol, Grid Systems 

.col2of6 {        /* where is col2of6? */
  float: left;    /* why do we float it? */
  display: inline;      /* what? */
  width: 31.707%; /* where’s that % from? */
  margin-right: 2.439%; /* another one? */
}
Keynote slide - bold maroon text on manilla - Meaningful CSS for a Humane Web by [miriam is scribbled over top my old name]
2012 slide - CSS is awesome, but it lacks meaningful abstractions.

The Meaning Problem… Repetition is hard to maintain.
Relationships are hidden.
Reasons are unclear.

2012 slide - The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page... We must "accept the ebb and flow of things. -John Allsopp, April 2000
2012 slide - CSS variables module level 1 w3c working draft, 10 April 2012, Thank you Tab Atkins! 
/* originally +grid-col(3) */
article {
  @include span(3);
}

A simple language Can Cause Complex Code

Some language complications Can Simplify Code

screenshot 
article { grid-column: span 3; }

main { grid-area: main; }
screenshot

Complexity Is a Moving Target

Complexity Is Something to Manage

Abstractions Make it Better & Worse

I’m back With New Abstractions

screenshot

CSS @Function Rule

See support data on the Web Features Explorer

CSS @Mixin Rule

See support data on the Web Features Explorer

Need Feedback

github.com/w3c/csswg-drafts/issues

See the Pen Simple Function by @miriamsuzanne on CodePen.

See the Pen Negative Function by @miriamsuzanne on CodePen.

@function --my-function(--optional, --parameters) {
  result: 4; /* returned value */
  --any-logic: using custom property syntax;
  --declarative: like any other CSS context;
}

CSS Functions Act Like Values 

button {
  padding: --space();
  background: --theme-color(brand);
  border: var(--border-width);
}

A declarative Bucket of Unordered Properties

External Variables Are Available Inside

Parameters & Internal Variables are Private

Only The Result Value Is Returned

Can Contain Media & Other Conditions

See the Pen Color Scheme Functions by @miriamsuzanne on CodePen.

See the Pen Gallery Mixin by @miriamsuzanne on CodePen.

See the Pen Gradient Mixin Text by @miriamsuzanne on CodePen.

@mixin --my-mixin(--optional, --parameters) {
  /* all styles are output? */
  --this-is: public;
  padding: 1em 2em;
}

Nothing is Private

CSS Mixins Act Like Nested Rules 

aside {
  @apply --callout-box(info);
  position: relative;
}

Styles expand Where Applied

Very Limited Prototype

These things will eventually work…

  • Directly nested styles
  • Parameters
  • Moving definitions later

Inline conditions With the if() Function

See the Pen If() with Media Queries by @miriamsuzanne on CodePen.

Inline Conditions with `if()`

See support data on the Web Features Explorer

Conditions…

  • media()
  • supports()
  • style()

Just the latest Inspired By Sass et al

  • Variables
  • Math and color functions
  • Nesting
  • if()
  • @function
  • @mixin

CSS versions Work Differently

We Need To Talk About Kevin movie poster for with a Tilda Swinton looking scared and Ezra Miller looking evil, but the word Kevin is replaced by scribbles so it says We Need to talk about --Variables
screenshot

Cascade & inherit As Properties of Elements

Sass variables use Lexical Scope 

html { $color: green; }
body { /* $color == undefined */ }

Custom properties use DOM Scope 

html { --color: green; }
body { /* --color == green */ }

See the Pen Custom Properties Demo: Buttons by @miriamsuzanne on CodePen.

Value Resolution

  1. Filtering
  2. Cascading
  3. Defaulting (includes inheritance)
  4. Resolving
  5. Formatting
  6. Constraining

On each html element
For every css property
We need exactly one value

Filtering Finds Relevant Declarations

  1. In a stylesheet that applies (see media attr)
  2. Not in a false conditional rule (see at-rules)
  3. In a selector that matches the HTML Element
  4. Is syntactically valid

✅ Valid Syntax 

html { color: teal; }

❌ Not Valid Syntax 

html { color: 3em; }

html {
  /* color: <color>; */
  color: teal; /* applied! */
  color: 3em; /* discarded */
}

✅ Valid Syntax 

html { color: var(--my-property); }

✅ Valid Syntax 

html { --my-property: teal; }

✅ Valid Syntax 

html { --my-property: 3em; }

✅ Still Valid Syntax 

html {
  --my-property: 3em;
  color: var(--my-property);
}

✅ Still Valid Syntax 

html {
  --my-property: 3em;
  color: var(--my-property);
}

@property --my-property {
  syntax: "<color>";
  initial-value: teal;
  inherits: true;
}

Declarations containing The var() function

Are not evaluated at parse time

Declarations containing The var() function
or if() function
or any --custom() function

Are not evaluated at parse time

Invalid At Computed Value Time

“IACVT”

See the Pen Invalid At Computed Value Time by @miriamsuzanne on CodePen.

Value Resolution

  1. Filtering
  2. Cascading (resolving conflicts)
  3. Defaulting
  4. Resolving

Cascade… Resolves Conflicting Values

When we have multiple declarations

Like other properties… Variables Cascade 

html {
  --color: white !important;
  --color: black;
}

See the Pen Importance in Custom Properties by @miriamsuzanne on CodePen.

Functions Don’t Cascade

Variables inside Functions Don’t Cascade

Importance Not Allowed In Functions

Mixins… Contribute Cascading Styles

See the Pen Easing Mixin & Function by @miriamsuzanne on CodePen.

Cascade Still Includes

  1. Origins
  2. Context (Shadow vs Light DOM)
  3. Element Attachment (Inline vs Selectors)
  4. Layers
  5. Specificity
  6. Scope
  7. Order of Appearance

Value Resolution

  1. Filtering
  2. Cascading
  3. Defaulting (filling in empty values)
  4. Resolving

Defaulting… Fills in Missing Values

Wireframe of a website with nested blue boxes, all of them have dashed borders
cascade:is(.selectors) - same wireframe, but some of the borders are now solid, and some have become pink
inheritance from context - same diagram, but the boxes that weren't styled before now match the color of their parent box

Defaulting process Depends on the Property

Some Properties Inherit

Custom properties Inherit By Default

Inheritance Requires Lineage 

html { color: red; }
body { color: blue; }
body > main { /* inherits… ? */ }

html { color: red; }

body > main { /* inherits… ? */ }

html { color: red; }
/* body inherits red from html */
/* body > main inherits red from body */ }
How to build generational wealth for your family, text overlaid on a multi-generation family photo all smiling at the camera
A line of tech oligarchs at the inauguration of Donald Trump, including Elon Musk of Tesla, Mark Zuckerberg of Meta, Jeff Bezos of Amazon, and Sunar Pichai of Google

Custom properties Can Carry Hidden Context

Allowing us to Inherit Across Generations

See the Pen End-Run Inheritance by @miriamsuzanne on CodePen.

Most properties Don’t Inherit

See the Pen Inheritance intuition by @miriamsuzanne on CodePen.

Generally… Un-styled Inline Boxes (spans)
Should Blend In

And so… Text Styles Inherit

While layouts and other… Box Styles Do Not Inherit

No inheritance? Default to Initial Value

Each property has an initial value, defined in the property’s definition table.

– Cascade & Inheritance, § 7.1. Initial Values

  • pick a property (display?)
  • Look it up on MDN
  • Check ‘formal definition’
  • Link to spec

Custom properties… Have No Definition Table?!

Default initial value… “The Guaranteed Invalid Value”

like Undefined in JS

See the Pen Invalid, Unsupported, or Undefined by @miriamsuzanne on CodePen.

@property --border-size {
  syntax: "<length>";
  initial-value: 1px;
  inherits: false;
}

Typed properties Will Never Fallback

Function Types 

@function --color() returns <color> {/* … */}

Use variables To Provide Fallback

See the Pen Guaranteed Invalid Functions by @miriamsuzanne on CodePen.

explicit defaulting… “Global Keywords”

  • initial (from spec)
  • inherit (from parent element)
  • unset (inherit or initial)
  • revert (from browser)
  • revert-layer (previous layer)

Defaulting keywords Apply To Custom Properties

See the Pen Defaulting keywords apply to custom properties by @miriamsuzanne on CodePen.

Functions should Pass Through Keywords

(not implemented yet)

Initial value Useful in Parameters

See the Pen Flag functions by @miriamsuzanne on CodePen.

See the Pen Context in Functions by @miriamsuzanne on CodePen.

See the Pen Mixin Privacy by @miriamsuzanne on CodePen.

Value Resolution

  1. Filtering
  2. Cascading
  3. Defaulting
  4. Resolving

See the Pen Computed Values by @miriamsuzanne on CodePen.

Computed Values Inherit

Move through DOM tree Resolve Parent,
then Default Children

Unregistered Properties Can’t Resolve

See the Pen Variables substitute, but don't resolve (until used) by @miriamsuzanne on CodePen.

See the Pen Comparing Values with Types by @miriamsuzanne on CodePen.

See the Pen Custom Unit by @miriamsuzanne on CodePen.

See the Pen Fluid scale function by @miriamsuzanne on CodePen.

See the Pen Conditional Border Radius by @miriamsuzanne on CodePen.

See the Pen Function Color Palettes by @miriamsuzanne on CodePen.

See the Pen CSS Physics by @miriamsuzanne on CodePen.

See the Pen miaGPT by @miriamsuzanne on CodePen.

You might notice… I’m Low on Mixins

github.com/w3c/csswg-drafts/issues

See the Pen Theme mixins for Brad by @miriamsuzanne on CodePen.

See the Pen Scrollbar colors for Adam by @miriamsuzanne on CodePen.

Some questions… That I Always Get…

Are there… Performance Issues?

Browsers Optimize Constantly

Generally… CSS is Not The Issue

To cause issues… Trigger Re-Style on More Elements

Question… Is Sass Dead Yet?

If you don’t need it anymore… Then Don’t Use It 🎉

But if you’re Building Design Systems

Sass provides… Loops, Lists, & Objects 🎉

Why make the browser Solve Server-side Problems?

Recap… Mixins & Functions

Not changing What We Can Do

If you thought CSS was Programming

It still is… (But With More Features)

If you thought CSS is Not Programming

It still isn’t… (But With More Features)

But improving The Syntax & Maintainability

2012 slide - CSS is awesome, but it lacks meaningful abstractions.

If you just want… To Code Some Styles Good

Designing With Code

Writing resilient and maintainable CSS

oddbird.dev/learn/courses/design-with-code/