@littlemissrobot/sass-mixins

Little Miss Robot - Sass mixins

This repository contains SASS mixins that we, at Little Miss Robot, like to use to make our wonderful lives in the world of SASS easier and more managable.

Info

This package contains no styling but simply provides a couple of mixins that execute a simple task and provide functionality based on certain variables.

Install

$ npm install --save-dev @littlemissrobot/sass-mixins

Usage

1. Import the library from the node_modules folder.

@import "~@littlemissrobot/sass-mixins/lib/mixins";

1. That's it! The mixins that are present within this file are now available to you!

Mixins - Breakpoints

respond-at($min-width)

Apply styling to every element above the given minimum width. This mixin can wrap CSS selectors with their respective properties or wrap properties within selectors.

Parameters:

• $min-width: minimum width till the media query is applied to

div {
	margin: 1rem;

	@include respond-at(720px) {
		margin: 3rem;
	}
}

@include respond-at(720px) {

	div {
		margin: 3rem;
	}
}

respond-to($min-width)

Apply styling to every element below the given maximum width. This mixin can wrap CSS selectors with their respective properties or wrap properties within selectors.

Parameters:

• $max-width: maximum width till the media query is applied to

div {
	margin: 1rem;

	@include respond-to(720px) {
		margin: 3rem;
	}
}

@include respond-to(720px) {

	div {
		margin: 3rem;
	}
}

respond-between($min-width)

Apply styling to every element between a minimum and maximum width. This mixin can wrap CSS selectors with their respective properties or wrap properties within selectors.

Parameters:

• $min-width: minimum width till the media query is applied to
• $max-width: maximum width till the media query is applied to

div {
	margin: 1rem;

	@include respond-between(720px, 960px) {
		margin: 3rem;
	}
}

@include respond-between(720px, 960px) {

	div {
		margin: 3rem;
	}
}

Mixins - Fonts

get-font($name, $url, $weight: normal, $style: normal)

Load a font file. Every version of the font should have the same name.

Parameters:

• $name: a name given to the font
• $url: location of the font file
• $weight: the weight (100, 300, 400, ...) the font file is based on
• $style: the style (italic, normal, ...) the font file is based on

@include get-font("Roboto", "/fonts/roboto/roboto", 300, normal);

Mixins - Typography

set-typo($keys)

This mixin assume you have defined $font-styles and $breakpoints map. Apply a font style defined within the $font-styles map. This also makes use of the $breakpoints variable to change the style based off viewport.

Parameters:

• $keys: a sass list that represents the hierarchy within the $font-styles variable until a definition or group of styles is met.

$breakpoints: (
	viewport-9: (
		width: 960px
	),
	viewport-12: (
		width: 1200px
	)
);

$font-styles: (
	paragraph: (
		base: (
			font-family: "Roboto",
			font-size: 1.6rem,
			viewport-9: (
				font-size: 2rem
			)
		),
		small: (
			font-family: "Roboto",
			font-size: 1.2rem,
			viewport-12: (
				font-size: 1.4rem
			)
		)
	),
);

p {
	@include set-typo("paragraph" "base");
}

small {
	@include set-typo("paragraph" "small");
}

Mixins - Responsive

responsive-prop($props, $responsive, $min, $max: false, $fallback: false)

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

• $props: the properties to make responsive, each property is separated by a space
• $responsive: the value that should scale with the viewport width, expressed in vw units
• $min: the minimum value, the $responsive does not go lower than this
• $max: the maximum value, the $responsive does not go higher than this
• $fallback: A fallback when the vw unit is not supported by the browser

p {
	@include responsive-prop("font-size", 2vw, 2rem, 4rem);
}

p {
	@include responsive-prop("font-size" "line-height", 2vw, 2rem, 4rem);
}