kickoff-functions-and-mixins.scss
Sass Functions and Mixins for the Kickoff framework
Install
npm install kickoff-functions-and-mixins.scss --save
Usage
With scss and the npm-sass or similar importer
Functions
_get-value.scss
Retrieve value from sass map
_map-deep-get.scss
Retrieve value from deeply nested sass map
; div
_modular-scale.scss
Sizes type using a consistent vertical rythm
// Used in the kickoff $type sass map variable modular-scale($font-size-base, -1, $type-scale)modular-scale($font-size-base, 0, $type-scale)modular-scale($font-size-base, 1, $type-scale)
_px-to-em.scss
Convert px em
_px-to-rem.scss -
Convert px rem
_strip-units.scss
Strip units
_tint-shade.scss
// Add percentage of white to a color background-color: tint(blue, 20%); // Add percentage of black to a color background-color: shade(blue, 20%);
Mixins
_hidpi.scss
Hi-dpi media query mixin
_module-naming-helpers.scss
Provides consistent class naming through the usage of mixins
See https://gist.github.com/mrmartineau/0cd2010bf265d712bafb for usage
_position.scss
Position shortcut
_responsive.scss
Responsive media-queries
// min-width // Equivalent to: @media screen and (min-width: 20em) { ... } ; // uses the $breakpoints sass-map ; // converts to px // max-width // Equivalent to: @media screen and (max-width: 20em) { ... } ; // uses the $breakpoints sass-map ; // converts to px // min-max-width // Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... } ; // uses the $breakpoints sass-map ; // converts to px
_units.scss
Dimension-based mixins
- REM calculation:
@include rem(margin, $font-size-base);
- REM font-size:
@include font-size(16);
- REM line-height:
@include line-height(22);
- EM font-size:
@include font-size-ems(20, 16);
_utility.scss
Utility Mixins
- clearfix:
@include clearfix;
- Text truncation:
@include truncate(100%);
- and a bunch more
_vertical-centre.scss
Vertically center any element. Needs support for CSS tranforms.