{"id":9932,"date":"2026-06-16T13:23:58","date_gmt":"2026-06-16T18:23:58","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9932"},"modified":"2026-06-16T14:29:03","modified_gmt":"2026-06-16T19:29:03","slug":"the-scope-of-css-function","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/the-scope-of-css-function\/","title":{"rendered":"The Scope of CSS @function"},"content":{"rendered":"\n

We’re going to walk through some advanced patterns for using @function<\/code> in CSS in this article that help you deliver awesome DX to your component or library users. You’ll need an understanding of CSS function foundations and limitations<\/a> to follow along with the gold here.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n The Fundamentals and Dev Experience of CSS @function<\/a>\n <\/li>\n
  2. \n The Scope of CSS @function<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    The Variable Scope of Custom CSS Functions<\/h2>\n\n\n\n

    Variable scope in custom CSS @ functions is really fascinating. In normal CSS, --vars<\/code> inherit from parent elements down to child elements. The children can freely use the inherited --vars<\/code>.<\/p>\n\n\n

    html<\/span> {\n  --theme<\/span>: light;\n  --size-1<\/span>: 1rem<\/span>;\n}\nhtml<\/span> div<\/span> {\n  --palette-1<\/span>: if<\/span>(\n    style(--theme: dark): black;\n    else<\/span>: white;\n  );\n  font-size<\/span>: var<\/span>(--size-1<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    Similarly, in JavaScript, a function defined inside of a context inherits<\/em> all of the variables from the context it’s defined in, to be used freely within the function. Colloquially in JavaScript, this context that variables are inherited from is called the closure scope<\/strong>.<\/p>\n\n\n
    let<\/span> html, div\n\nhtml = ()<\/span> =><\/span> {\n  const<\/span> theme = \"light\"<\/span>\n  const<\/span> size1 = \"1rem\"<\/span>\n\n  div = ()<\/span> =><\/span> {\n    const<\/span> palette1 = theme === \"dark\"<\/span> ? \"black\"<\/span> : \"white\"<\/span>\n    const<\/span> fontSize = size1\n    return<\/span> { palette1, fontSize }\n  }\n\n  return<\/span> { theme, size1 }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Traditional CSS var()<\/code> usages relies heavily on patterns and expectations from your DOM structure.<\/p>\n\n\n\n
    That is, DOM structure determines what context a child expected to exist under and therefore determines which vars you can guarantee will be inherited from the parents and safe to use in the child.<\/p>\n\n\n\n
    CSS Functions Have a Fascinating Superpower with Scope<\/h3>\n\n\n\n
    They experience an inherited sort-of-closure scope from wherever they’re called<\/em>. This exposes their internal work to all of the variables in any context they’re called from, as if they were a child element in the DOM and inherited them<\/em>!<\/p>\n\n\n\n
    In JavaScript, it’s as if the definition for the child function was kept as a string and passed through eval()<\/code> wherever it’s used.<\/p>\n\n\n\n
    An evaluation scope<\/strong>, so to speak.<\/p>\n\n\n
    let<\/span> html, div\n\nconst<\/span> fn = `() => {\n  const palette1 = theme === \"dark\" ? \"black\" : \"white\"\n  const fontSize = size1\n  return { palette1, fontSize }\n}`<\/span>\n\nhtml = ()<\/span> =><\/span> {\n  const<\/span> theme = \"light\"<\/span>\n  const<\/span> size1 = \"1rem\"<\/span>\n\n  div = eval<\/span>(fn)\n\n  return<\/span> { theme, size1 }\n}\n\nhtml().size1 === div().fontSize\n\/\/ true<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    In CSS:<\/p>\n\n\n
    @function<\/span> --palette-1<\/span>() {\n  result<\/span>: if<\/span>(\n    style<\/span>(--theme<\/span>: dark<\/span>): black<\/span>;\n    else<\/span>: white<\/span>;\n  );\n}\n@function<\/span> --font-size() {\n  result<\/span>: var<\/span>(--size-1<\/span>);\n}\n\nhtml<\/span> {\n  --theme<\/span>: light;\n  --size-1<\/span>: 1rem<\/span>;\n}\nhtml<\/span> div<\/span> {\n  --palette-1<\/span>: --palette-1<\/span>();\n  \/* white *\/<\/span>\n  font-size<\/span>: --font-size<\/span>();\n  \/* 1rem *\/<\/span>\n}\n\n.evaluation-scope<\/span> {\n  --theme<\/span>: dark;\n  --size-1<\/span>: 20px<\/span>;\n\n  --palette-1<\/span>: --palette-1<\/span>();\n  \/* black *\/<\/span>\n  font-size<\/span>: --font-size<\/span>();\n  \/* 20px *\/<\/span>\n}\n\n.evaluation-scope<\/span> div<\/span> {\n  --palette-1<\/span>: --palette-1<\/span>();\n  \/* black *\/<\/span>\n  font-size<\/span>: --font-size<\/span>();\n  \/* 20px *\/<\/span>\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    This is Awesome<\/h3>\n\n\n\n
    Any component you build could have CSS functions associated with it. Those functions only ever get called from within the component, so their implementation can rely on a guaranteed evaluation scope<\/strong> from your component. \ud83e\udd0c I love this.<\/strong><\/p>\n\n\n\n