1.1.0 • Published 6 years ago
sass-mixins-variables v1.1.0
Sass (SCSS) Mixins & Variables
This package offers various mixins and variables I use all the time in my personal projects.
Installation
NPM
Install using NPM:
npm install --save sass-mixins-variablesImport 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 : 1040pxMixins & 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 $fontsize--root size. e.g., `font-size: font-per-base( $size: 20px, $base: $fontsize--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. |