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
- Import the library from the node_modules folder.
@import "~@littlemissrobot/sass-mixins/lib/mixins";
- 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($group-name: "paragraph", $style-name: "regular")
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:
- $group-name: name of the group the style is defined within
- $style-name: name of the style defined within the group
$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);
}