Generate all pair permutations in Utopia SCSS
By Trys Mudford
A new allPairs
parameter has been added to utopia-core-scss.
When this boolean paramater is applied to utopia.generateSpaceScale
, all possible permutations of the positive and negative space steps will be generated. For a small set of steps, this convenient addition allows you to focus on painting with space, rather than remembering to keep your customSizes
list up to date. To that end, if you're using this property, you can omit the customSizes
property.
Be aware, however, that if you have a larger number of negativeSteps
/ positiveSteps
, this will result in a much larger final CSS output. Consider using a tool such as PurgeCSS to remove any unused CSS custom properties at build time to get the best developer and user experience.
allPairs
is also supplied as a new property in the result of utopia.calculateSpaceScale
, should you wish to create your own custom generation of the space scale.
This is available in the latest version of Utopia Core SCSS, now at version 1.3.0
.
First published on 19 May 2025