@littlemissrobot/sass-mixins

Little Miss Robot - Sass mixins

This package contains Sass (Dart Sass) based mixins that we, at Little Miss Robot, like to use to make our wonderful lives in the world of SASS more wondeful.

This package does not contain or generate any CSS by itself, only if a mixin is inlucded. It simply provides a couple of @mixin statements for you to make use of.

IMPORTANT

• Make use of Dart Sass:

  This library makes use of Dart Sass, which is the primary implementation of Sass. Make sure that your Sass compiler is making use of Dart Sass.

• Generate only what you need:

  This library generates classes based on your configuration. The larger the configuration, the more css, the larger the CSS file. DO NOT enable all the config options, but only the ones you actually use and need!

Install

# As a dependency
$ npm install @littlemissrobot/sass-mixins
# As a dev-dependency
$ npm install --save-dev @littlemissrobot/sass-mixins

Usage

1. Import the library from the node_modules folder:

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-mixins" as _mixins;

1. Mixins are now available within the _mixins namespace:

@include _mixins.responsive-props(...);

Mixins

responsive-props($props, $responsive, $min, $max)

Create a CSS property or properties that are responsive by defining a minimum and maximum value. For example: responsive font-sizes.

Parameters:

• $props: the list of props to make responsive.
• $responsive (number, vw): the responsive value in vw.
• $min (number, px): the fixed minimum value in pixels where the responsive value is not allowed to go under. If passed as px, then it is converted to rem.
• $max (number, px): the fixed maximum value in pixels where the responsive value is not allowed to go above. If passed as px, then it is converted to rem.

@use "@littlemissrobot/sass-mixins" as _mixins;
@include _mixins.responsive-props(margin-top, 2vw, 24px, 48px);
@include _mixins.responsive-props((margin-top, margin-left), 2vw, 24px, 48px);