Sass (SCSS) Mixins & Variables

This package offers various mixins and variables I use all the time in my personal projects.

Installation

NPM

1. Install using NPM:

   npm install --save sass-mixins-variables

2. Import into your main SCSS file:

   // Import Variables (beta)
   @import 'node_modules/sass-mixins-variables/variables';
   // Import Mixins
   @import 'node_modules/sass-mixins-variables/mixins';

Overwrite default variables

All the variables mixins use are set with !default so can easily be overwritten.

$primary                 : #00deff
$secondary               : #0050ff

$path--image             : 'assets/images'
$path--font              : 'assets/fonts'

$font__size--root        : 16px

$breakpoint__extra-large : 1400px
$breakpoint__large       : 991px
$breakpoint__medium      : 767px
$breakpoint__small       : 480px
$breakpoint__extra-small : 320px

$container__width        : 1040px

Mixins & Functions

These are the available mixins you can use in your SCSS project.

Name | Type | Description ------ | ----- | ----- spacing | mixin | Creates spacing classes for paddings and margins bg-img-full | mixin | Expands full background image CSS with background-size. bg-img-only | mixin | Expands only background-image CSS all-colors | mixin | Changes the color of all the child themes, including main element and: a, h1-h6 all-headings-colors | mixin | Changes color of all the headings from h1-h6 calc-rem | funciton | Convert pixel into 'rem'. Root size is based on $font__size--root value. Multiple values are accepted, e.g., 10px 20px 10px 20px calc-em | funciton | Convert pixel into 'em'. Root size is based on $font__size--root value. Multiple values are accepted, e.g., 10px 20px 10px 20px prop-rem | mixin | Automatically generates CSS properties with 'rem' unit with a fallback 'px' unit for old browsers. e.g., @include prop-rem( line-height, 50px ); prop-em | mixin | Automatically generates CSS properties with 'em' unit with a fallback 'px' unit for old browsers. e.g., @include prop-em( line-height, 50px ); font-size | mixin | Generates font-size from pixel into 'rem' with 'px' as fallback. margin | mixin | Generates margin from pixel into 'rem' with 'px' as fallback. e.g., @include margin( 10px 20px ); padding | mixin | Generates padding from pixel into 'rem' with 'px' as fallback. e.g., @include padding( 10px 20px ); size-rem | mixin | Description yet to be provided. width | mixin | Generates width from pixel into 'rem' with 'px' as fallback. height | mixin | Generates height from pixel into 'rem' with 'px' as fallback. media | mixin | Opens responsive media. bp-x-large | mixin | Opens max-width responsive @media with size based on $breakpoint__extra-large variable bp-large | mixin | Opens max-width responsive @media with size based defined in $breakpoint__large variable bp-medium | mixin | Opens max-width responsive @media with size based defined in $breakpoint__medium variable bp-small | mixin | Opens max-width responsive @media with size based defined in $breakpoint__small variable bp-x-small | mixin | Opens max-width responsive @media with size based on $breakpoint__extra-small bp-x-large-min | mixin | Opens min-width responsive @media with size based defined in $breakpoint__extra-large-min variable bp-large-min | mixin | Opens min-width responsive @media with size based defined in $breakpoint__large-min variable bp-medium-min | mixin | Opens min-width responsive @media with size based defined in $breakpoint__medium-min variable bp-small-min | mixin | Opens min-width responsive @media with size based defined in $breakpoint__small-min variable bp-x-small-min | mixin | Opens min-width responsive @media with size based defined in $breakpoint__extra-small-min variable opacity | mixin | Generates opacity CSS with fallback for older browsers. vertical-center | mixin | Makes child elements vertically centerd. Applied on the parent element. e.g., @include vertical-center( 100px, '.child-item' ); position | mixin | Shorthand for position CSS properties. background | mixin | Shorthand for individual background properties. It's used to avoid using background property that overrides all previous background properties. background-opacity | mixin | Background opacity using SCSS rgba function with fallback background color for older browsers. e.g., @include background-opacity(#000, 0.5); per-calc | function | Converts pixel into percentage based on container's size. e.g., width: per-calc(250px, 1000px); ---> width: 25% center-with-width | mixin | Center align block-level element using margin-x auto method. e.g., @include center-with-width( 250px ); grid | mixin | Generates custom grid classes with row and columns. e.g., @include grid( $number: 12, $gutter: 30px ); font-per-base | function | Converts pixel to '%' for font size based on $font__size--root size. e.g., font-size: font-per-base( $size: 20px, $base: $font__size--root ); strip-unit | function | Strips a unit from number. e.g., 12px will become 12 flex-container | mixin | Description yet to be provided. primary-gradient | mixin | Description yet to be provided. aspect-ratio | mixin | Convert pixel into aspect ratio in percentage. e.g., aspect-ratio( 16px 9px ); will convert into 56.25% single-button | mixin | Description yet to be provided.