Numerous Packages Multiply


    3.0.2 • Public • Published


    Sass Functions and Mixins for the Kickoff framework

    npm version


    npm install @kickoff/utils.scss --save
    yarn add @kickoff/utils.scss


    With scss and the npm-sass or similar importer like eyeglass.

    @import "kickoff-utils.scss" // with npm-sass
    @import "kickoff-utils" // with eyeglass



    Various color functions

    // With a color palette map like this:
    $color-palette: (
      white: (
        base: #ffffff
      sky: (
        lighter: #f9fafb,
        light: #f4f6f8,
        base: #dfe3e8,
        dark: #c4cdd5
    // ko-color() function
    a {
      color: ko-color(white); // picks the `base` value
      color: ko-color(sky, dark); // picks the `dark` variant
      color: ko-color(sky, lighter); // picks the `lighter` variant
    // ko-color-tint() function
    // Add percentage of white to a color
    a {
      background-color: ko-color-tint(blue, 20%);
    // ko-color-shade() function
    // Add percentage of black to a color
    a {
      background-color: ko-color-tint(red, 10%);


    Retrieve value from sass map. Often used within the font-size mixin.

    // map helper
    ko-getValue(mid, $map) // uses a Sass map


    Get breakpoint from $breakpoints map

    ko-bp(m) // uses the $breakpoints Sass map


    Get font-family from $font-family map

    ko-font(system) // uses 'system' font stack
    ko-font(sans) // uses the 'sans' font stack


    Get font-size from $type map

    ko-font-size(xl) // Kickoff uses t-shirt sizes
    ko-font-size(large, $font-sizes) // Using a made-up $font-sizes map


    Get z-index value from $z-index map

    ko-zIndex(low) // uses 'low' z-index value
    ko-zIndex(mid) // uses 'mid' z-index value


    Retrieve value from deeply nested sass map

     $grid-configuration: (
       'columns': 12,
       'layouts': (
         'small': 800px,
         'medium': 1000px,
         'large': 1200px,
     div {
       font-size: ko-map-deep-get($grid-configuration, 'columns');
       width: ko-map-deep-get($grid-configuration, 'layouts', 'medium');


    Multiply any value

    ko-multiply(15, 2)
    ko-multiply($baseline, 1.5)
    // e.g.
    a {
    	margin-bottom: ko-multiply($baseline, 1.5);


    Convert px em

    For a relational value of 12px write ko-em(12) when the parent is 16px If the parent is another value say 24px write ko-em(12, 24)


    font-size : ko-em(12);
    font-size : ko-em(12, 24);


    Strip units



    Type size helper classes based on our $type map. See demo

    // outputs type-size helpers based on the $type map
    // e.g. .u-typeSize--m / .u-typeSize-l
    @include ko-type-sizes();
    // Using another $map as the 2nd argument would output the above
    // as well as the .h1, .h2 values defined in the 2nd $map
    @include ko-type-sizes($type, (h1: xxl, h2: xl));
    // Using another $map as the 2nd argument would output the above
    // as well as the .alpha, .beta values defined in the 2nd $map
    @include ko-type-sizes($type, (alpha: xxl, beta: xl));


    Responsive helper classes to show/hide content based on our $breakpoints map. See demo

    @include ko-rwd-reveal();


    Utility Mixins

    • clearfix: @include ko-clearfix;
    • Text truncation: @include ko-truncate(100%);
    • and a bunch more


    Vertically center any element. Needs support for CSS tranforms.

    @include vertical-center;


    Hi-dpi media query mixin

    @include ko-hidpi {


    Provides consistent class naming through the usage of mixins

    See for usage


    Position shortcut

    @include ko-position(absolute, 10px 20px 30px 10px);


    Responsive media-queries.

    🚨 This is deprecated, we recommend the use of include-media for media-queries now.

    // min-width
    // Equivalent to: @media screen and (min-width: 20em) { ... }
    @include ko-respond-min(mid) { ... }; // uses the $breakpoints sass-map
    @include ko-respond-min(650) { ... }; // converts to px
    // max-width
    // Equivalent to: @media screen and (max-width: 20em) { ... }
    @include ko-respond-min(large) { ... }; // uses the $breakpoints sass-map
    @include ko-respond-min(460) { ... }; // converts to px
    // min-max-width
    // Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
    @include ko-respond-min-max(narrow, large) { ... }; // uses the $breakpoints sass-map
    @include ko-respond-min-max(460, 900) { ... }; // converts to px


    Dimension-based mixins

    🚨 These mixins have been removed. They are not needed because we now use a PostCSS plugin (postcss-pxtorem) that converts px values to rem at the build stage


    npm i @kickoff/utils.scss

    DownloadsWeekly Downloads






    Last publish


    • jpdriver
    • ashleynolan
    • mrmartineau