.dcss-sample

Evaluates your formula at each item of a list, for another call to read. Here the samples are summed.

Example

Result
Markup
<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/array.css">
<link rel="stylesheet" href="families/format.css">
<link rel="stylesheet" href="families/math.css">

<figure class="dcss-sum dcss-sample sm" style="--from: 0; --to: 1">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <output class="dcss-format-fixed" style="--value: var(--dcss-sum); --precision: 0"></output>
</figure>
CSS
.sm li { --dcss-formula: calc(64 * var(--dcss-input) * var(--dcss-input)); }
.sm { overflow: clip; }

Notes

Each call takes your own formula, written once as --dcss-formula in terms of --dcss-input. A .dcss-solve with data-dcss-steps="n" halves the range n times, one nested element a step, and BASICSS writes those elements for you: npx basicss page.html -o built.html.

Browser support

BrowserSupport
ChromeYes
SafariYes
FirefoxWhole numbers only