Vanilla Sass helper functions

  • By Tobias Bengfort
  • Last update: Sep 11, 2022
  • Comments: 4

Sass-Planifolia - Vanilla Sass helper functions

Compass was great, but it has been unmaintained for a while now. In addition, the rise of libSass means that ruby extensions are no longer a good way forward.

Planifolia is a collection of commonly used helper functions. It does not depend on a specific implementation of the Sass compiler.

The following modules are included:

  • math for high performance math functions
  • contrast for WCAG compatible color contrast functions
  • color for CIELAB/CIELUV based color functions (with support for HSLuv)
  • clearfix for compass compatible clearfix mixins
  • grid for simple grid mixins

These modules can be imported individually (color depends on math though). Also note that these modules will only define mixins and variables. They will not output any CSS. This means that importing them does not add a single byte to your CSS.

See the full documentation for more details.

Quick start

npm install sass-planifolia

Import it in your Sass files:

@import "node_modules/sass-planifolia/sass/math";
@import "node_modules/sass-planifolia/sass/contrast";
@import "node_modules/sass-planifolia/sass/color";

.test {
    background-color: red;

    // pick between two colors (default: black and white) to get good contrast
    color: contrast-color(red);

    // mix orange with black or white to get good contrast to red
    border-color: contrast-stretch(red, orange);

    // mix red with black in a perceptually uniform color space
    box-shadow: 0 0 1em pf-shade(red, 0.5, 'lab');

    // calculate modular scale dynamically
    font-size: 16px * pow(1.5, 2);
}

What is not included?

  • Vendor prefixes, polyfills or browser hacks. There are plenty of librariers for that.
  • pt/px/em/rem conversion. That is (a) not possible and (b) not helpful. Each unit has its specific use case. Learn to use the right units directly!

Similar libraries

  • mathsass is another very good pure-sass math implementation.
  • accoutrement-color and bourbon also contain WCAG-appropriate color-contrast functions, but they ignore alpha-transparency.
  • eyeglass-math and chromatic-sass also do advanced math/color manipulation, but they can only be used with node-sass.

Github

https://github.com/xi/sass-planifolia

Comments(4)

  • 1

    Hue parameter in lch() output in radians

    lch() functions work with hue in radians, but by standard, hue must be in degrees. It's may be good to have some solution to be enable working with degrees.

    Here some useful links: https://drafts.csswg.org/css-color-4/#specifying-lab-lch http://www.brucelindbloom.com/index.html?Eqn_LCH_to_Lab.html http://www.brucelindbloom.com/index.html?Eqn_Lab_to_LCH.html

  • 2

    Fix deprecation warnings when using latest version of Dart Sass

    Hi, thanks for this cool library! I gave this a try because I need to mix colors in Lab color space, and it works great! However, I noticed that I would get some deprecation warnings about using / instead of math.div when using with the latest version of Sass.

    This pull request switches from the now-deprecated Node Sass, to the supported version of Sass, which is Dart Sass. The code and associated tests are updated to avoid deprecation warnings with this version of Sass.

    I also took the liberty of updating the version number to 0.6.1 and adding an entry to the CHANGES file, in hopes that you might want to cut a new release, so I could use these changes without needing to make my own fork :)

    This commit is squashed. The full list of changes is:

    I hope this PR is useful, but no worries if you don't have time to take a look at it. Let me know if any changes need to be made! :)

  • 3

    Add $contrast as third parameter of contrast-color() function.

    Add $contrast as third parameter of contrast-color() function. If both colors meet the contrast requirements, $color1 will be used.

    Example:

      $color: #6170c2;
  background-color: $color;
  color: contrast-color($color, white, black, 4.5); 
  // contrast($color, white) => 4.56;
  // contrast($color, black) => 4.6

    Result CSS:

      background-color: #6170c2;
  color: white;
  • 4

    rad value conversion

    @xi thanks for sharing your fast compiling math functions – very impressive results :-) To speed up and simplify to-rad-value – consider using native fixed unit conversion:

    //  convert to rad and strip unit 
@function rad-value($x){ 
    @return (0rad + $x)/1rad; 
}

.x {
    num : rad-value(4.71239);    
    rad : rad-value(4.71239rad);    
    deg : rad-value(270deg);
    turn: rad-value(.75turn);
    grad: rad-value(300grad); 
}

    .x {
  num:  4.71239;
  rad:  4.71239;
  deg:  4.71239;
  turn: 4.71239;
  grad: 4.71239;
}

Popular Tag

Related