Skip to content

Beta: Migratation to Sass Modules

Pre-release
Pre-release
Compare
Choose a tag to compare
@mirisuzanne mirisuzanne released this 03 Dec 22:29
cc2f21a

This is a major update, moving over to Sass modules,
and removing some features that no longer seem necessary.

  • BREAKING: Requires Sass modules, and other recent features of Dart Sass.
    Legacy versions of Sass (Node & Ruby) are no longer supported

  • BREAKING: The old "init" module, which provided light-weight
    browser normalization, is no longer included. We now recommend
    using CSS Remedy.

  • BREAKING: The old "core" module has been broken into individual modules
    for "utilities" (extending several Sass modules),
    "tokens" (the map syntax parser),
    "variables" (converting Sass variables & maps to CSS custom properties),
    and "ratios" (for typographic scales and layout aspect ratios)

  • Sass Utilities:

    • NEW: These functions are now available directly,
      as well as being registered in the map syntax
  • Variables:

    • NEW: ident() function adds -- and an optional prefix to any string,
      in order to generate a custom property identifier.
    • NEW: custom-props() mixin generates custom properties
      for every key/value pair in a map.
  • Tokens:

    • NEW: A module just for the custom map syntax parser & function registration
    • BREAKING: The $functions map no longer accepts alias references
      or any other aspects of the token syntax
    • BREAKING: Ratios are no longer first-class adjustments
      (like functions) in the token syntax
    • BREAKING: tokens.$handle-missing-keys defaults to null,
      and no longer supports the legacy silent option.
    • BREAKING: get-token() is renamed get(),
      and only accepts bare token names (no # prefix),
      including the outer->inner nested token syntax.
    • NEW: The new compile() function provides direct access to
      parse & resolve an arbitrary token value
      (including aliases with # prefix),
      rather than calling a specific token by name.
    • NEW: All the built-in Sass module functions are registered by default,
      as <module-name>.<function-name>
    • NEW: has-token() function checks a map
      to see if the given token is defined,
      and supports the outer->inner nested token syntax.
  • Ratios:

    • NEW: Built-in named ratios are now available as individual variables,
      (without the _ prefix that is applied in token maps)
    • NEW: is-ratio() function can be used to type-check ratios,
      including ratio tokens.
  • Scale:

    • NEW: scale() function applies a modular scale to any value,
      allowing you to move up or down the scale any number of steps.
  • Layout:

    • BREAKING: Removed global-box-sizing
    • BREAKING: Removed clearfix
    • BREAKING: Removed fluid-ratio
    • BREAKING: Removed position. Can achieve the majority of functionality in CSS using
      Inset