@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.

Dependencies

• @littlemissrobot/sass-functions/lib/main

Install

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

Usage

1. Import the library from the node_modules folder.

@import
	// Dependency
	"@littlemissrobot/sass-functions/lib/main",
	// Library
	"@littlemissrobot/sass-mixins/lib/main";

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

Mixins

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);

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);
}