@littlemissrobot/sass-mixins

Little Miss Robot - Sass mixins

This repository 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

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.

This means that if you are using a task manager (like Gulp) or a module bundler (like Webpack), you must indicate which compiler it should use for compiling Sass to CSS.

Furthermore, this library makes heavy use of Sass modules: @use. Therefore we recommend importing and using this library with the @use statement.

Install

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

Usage

Through the main entry point

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:

ul {
    @include _mixins.reset_list();
}

1. That's (mind-blowingly) it! The mixins are seperated with internal namespaces, where mixins related to the reset category are namespaced with _mixins.reset_[MIXIN-NAME] or typography would be _mixins.typography_[MIXIN-NAME].

Through the partial entry points

1. Import the partial of the library from the node_modules folder.

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

1. Mixins are now available within the _reset namespace.

h1 {
    @include _reset.list();
}

1. That's (mind-blowingly) it! There are a number of partials to use the mixins from:

   • "sass-mixins/font" as _font;
   • "sass-mixins/other" as _other;
   • "sass-mixins/prop" as _prop;
   • "sass-mixins/reset" as _reset;
   • "sass-mixins/screen-reader" as _screen-reader;
   • "sass-mixins/typography" as _typography;

Mixins

Font

These mixins are namespace with font_:

@use "@littlemissrobot/sass-mixins" as _mixins;

@include  _mixins.font_load("Open Sans", "./open-sans");

Or can be included through the partial:

@use "@littlemissrobot/sass-mixins/font" as _font;

@include  _font.load("Open Sans", "./open-sans");

load($name, $url, $font-weight, $font-style)

Load font files with the extensions .woff and .woff2. Every version of the font should have the same name.

Parameters:

• $name: The name the font should have
• $url: The location of the font-files
• $font-weight (optional): The weight the font has
• $font-style (optional): The style the font has

@use "@littlemissrobot/sass-mixins/font" as _font;

@include _font.load("Open Sans", "./assets/fonts/open-sans", "300", normal);

Other

These mixins are namespace with other_:

@use "@littlemissrobot/sass-mixins" as _mixins;

@include _mixins.other_clearfix();

Or can be included through the partial:

@use "@littlemissrobot/sass-mixins/other" as _other;

@include _other.clearfix();

clearfix

Used in float layouts where elements are floated to be stacked horizontally. Automatically clear its child elements, so that you don't need to add additional markup.

@use "@littlemissrobot/sass-mixins/other" as _other;

@include _other.clearfix();

Prop

These mixins are namespace with prop_:

@use "@littlemissrobot/sass-mixins" as _mixins;

@include _mixins.prop_responsive(margin-top, 5vw, 3rem, 7rem);

Or can be included through the partial:

@use "@littlemissrobot/sass-mixins/prop" as _prop;

@include _prop.responsive(margin-top, 5vw, 3rem, 7rem);

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

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

Parameters:

• $props: the list of props to make responsive
• $responsive: the responsive value in vw
• $min: the fixed minimum value where the responsive value is not allowed to go under
• $max: the fixed maximum value where the responsive value is not allowed to go above

@use "@littlemissrobot/sass-mixins/prop" as _prop;

@include _prop.responsive(margin-top, 5rem, 3vw, 7vw);

Reset

These mixins are namespace with reset_:

@use "@littlemissrobot/sass-mixins" as _mixins;

@include _mixins.reset_list();

Or can be included through the partial:

@use "@littlemissrobot/sass-mixins/reset" as _reset;

@include _reset.list();

button

Reset a button by removing the default styling properties.

Parameters:

• $important (optional): Pass the !important suffix to each styling property within the mixin

@use "@littlemissrobot/sass-mixins/reset" as _reset;

@include _reset.button();
@include _reset.button(!important);

list

Reset a list by removing the default styling properties.

Parameters:

• $important (optional): Pass the !important suffix to each styling property within the mixin

@use "@littlemissrobot/sass-mixins/reset" as _reset;

@include _reset.list();
@include _reset.list(!important);

Screen reader

These mixins are namespace with screen-reader_:

@use "@littlemissrobot/sass-mixins" as _mixins;

@include _mixins.screen-reader_visually-hidden();

Or can be included through the partial:

@use "@littlemissrobot/sass-mixins/screen-reader" as _screen-reader;

@include _screen-reader.visually-hidden();

visually-hidden($important)

Only display content to screen readers, hide the element offscreen to keep its functionality and behaviour. DO NOT COMPROMISE ACCESSIBILITY.

Parameters:

• $important (optional): Pass the !important suffix to each styling property within the mixin

@use "@littlemissrobot/sass-mixins/screen-reader" as _screen-reader;

@include _screen-reader.visually-hidden();
@include _screen-reader.visually-hidden(!important);

Typography

These mixins are namespace with typography_:

@use "@littlemissrobot/sass-mixins" as _mixins;

@include _mixins.typography_truncate();

Or can be included through the partial:

@use "@littlemissrobot/sass-mixins/typography" as _typography;

@include _typography.truncate();

truncate($important)

Add 3 dots to a text element that goes out of its bounds. This is always limited to one straight line.

@use "@littlemissrobot/sass-mixins/typography" as _typography;

@include _typography.truncate();