Skip to content

Instantly share code, notes, and snippets.

@zeshanshani
Last active December 27, 2021 15:13
Show Gist options
  • Save zeshanshani/c4d5ae43e6a9f661d012 to your computer and use it in GitHub Desktop.
Save zeshanshani/c4d5ae43e6a9f661d012 to your computer and use it in GitHub Desktop.
SCSS mixins I use in my daily SCSS projects. Contains a wide range of helpful mixins for various things, e.g., generates font-size in 'rem' with 'px' fallback; generates small bootstrap similar grids for individual parts; etc. Include all or your desired ones from the list to your next project. Note: I use Bourbon.io to all of my projects, so ma…
// ===========================================
// sass/_mixins.scss
// ===========================================
//
// Custom SCSS Mixins.
//
// Variables used from _variables.scss file
// copy/change the variables to reflect the
// changes in your project.
// ===========================================
// ===========================================
// Table of Contents
//
// 01. Spacing
// 02. Background Image
// i. Background Image Full
// ii. Background Image Only
// 03. All Colors
// 04. All Headings Colors
// 05. Units
// i. Calculate REM
// ii. Calculate EM
// iii. Font Size
// iv. Margin
// v. Padding
// 06. Breakpoints
// 07. Opacity
// 08. Vertically Centered
// 09. Position
// 10. Background Position
// 11. Auto Center Vertically
// 12. Pixel to Percentage
// 13. Center with Width
// 14. Grids
// 15. Font Size Pixel to Percentage
// 16. Remove the unit of a length
// 17. Flexbox Container
// 18. Primary Gradient
// 19. Aspect Ratio
// 20. Single Button
// 21. Make Grid
// i. Make Row
// ii. Make Columns
//
// ===========================================
// 01. Spacing
// ===========================================
//
// Creates spacing classes for paddings and margins
//
// $type = padding, margin
// $multiple = 1, 2, 5, 10... ; e.g. mt5, mt10, mt15...
// $end = 10, 20, 50... ; Number of times loop runs.
// $direction = top, right, bottom, left ; set the direction
//
@mixin spacing( $type, $multiple, $end, $direction ) {
$class: m;
@if $type == padding {
$class: p;
} @else {
$class: m;
}
@for $i from 1 through $end {
@if $direction == top {
.#{$class}t#{$multiple * $i} {
#{$type}-top: 1px*($multiple * $i);
}
} @else if $direction == bottom {
.#{$class}b#{$multiple * $i} {
#{$type}-bottom: 1px*($multiple * $i);
}
} @else if $direction == left {
.#{$class}l#{$multiple * $i} {
#{$type}-left: 1px*($multiple * $i);
}
} @else if $direction == right {
.#{$class}r#{$multiple * $i} {
#{$type}-left: 1px*($multiple * $i);
}
}
}
}
// 02. Background Image
// ===========================================
//
// $path-image variable should be in your _variables.scss file, e.g.
// $path-image: '../images'
//
@mixin bg-img-full( $path, $color: transparent, $repeat: no-repeat, $position: 0 0, $size: null ) {
background: $color url('#{$path-image}/#{$path}') $repeat $position;
background-size: $size;
}
@mixin bg-img-only( $path ) {
background-image: url('#{$path-image}/#{$path}');
}
// 03. All Colors
// ===========================================
//
// Replace all text color inside an element.
// Useful to use on dark background to achieve light text color
//
@mixin all-colors( $color ) {
color: $color;
h1, h2, h3, h4, h5, h6, a {
color: $color;
}
}
// 04. All Headings Colors
// ===========================================
//
// Replace all headings color inside an element.
// Useful to use on dark background to achieve light headings color
//
@mixin all-headings-colors( $color ) {
h1, h2, h3, h4, h5, h6 {
color: $color;
}
}
// 05. Units
// ===========================================
//
// 05 (i). Calculate Rem
//
@function calc-rem ( $size: (), $root: $f-size-root ) {
$size-root: $root;
$size_final: '';
@for $i from 1 to length($size) + 1 {
$n_size: nth( $size, $i ) / $size-root;
$size_final: join($size_final, strip-unit( $n_size ) * 1rem);
}
@return #{$size_final};
}
//
// 05 (ii). Margin
//
// calculates margin in 'rem' with 'px' fallback.
// with the option to set direction, e.g., 'margin-top'
//
@function calc-em ( $size: () ) {
$size-root: 16px;
$size_final: '';
@for $i from 1 to length($size) + 1 {
$n_size: nth( $size, $i ) / $size-root;
$size_final: join($size_final, strip-unit( $n_size ) * 1em);
}
@return #{$size_final};
}
//
// 05 (iii). Font Size
//
// calculates font size in 'rem' with 'px' fallback.
//
@mixin font-size( $size ) {
font-size: $size;
font-size: calc-rem($size);
}
//
// 05 (iv). Margin
//
// calculates margin in 'rem' with 'px' fallback.
// with the option to set direction, e.g., 'margin-top'
//
@mixin margin( $size, $dir: null ) {
@if $dir != null {
$dir: '-' + $dir;
}
margin#{$dir}: $size;
margin#{$dir}: calc-rem($size);
}
//
// 05 (v). Padding
//
// calculates padding in 'rem' with 'px' fallback.
// with the option to set direction, e.g., 'padding-top'
//
@mixin padding( $size, $dir: null ) {
@if $dir != null {
$dir: '-' + $dir;
}
padding#{$dir}: $size;
padding#{$dir}: calc-rem($size);
}
//
// 05 (v). Size Rem
//
// calculates size (width & height) in 'rem'
// with 'px' fallback.
//
@function is-size($value) {
@return is-length($value)
or contains("fill" "fit-content" "min-content" "max-content", $value);
}
@mixin size-rem($value) {
$width: nth($value, 1);
$height: $width;
@if length($value) > 1 {
$height: nth($value, 2);
}
@if is-size($height) {
height: $height;
height: calc-rem($height);
} @else {
@warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
}
@if is-size($width) {
width: $width;
width: calc-rem($width);
} @else {
@warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
}
}
//
// 05 (v). Width Rem
//
// calculates width in 'rem' with 'px' fallback.
//
@mixin width( $width: null ) {
width: $width;
width: calc-rem($width);
}
//
// 05 (v). Height Rem
//
// calculates height in 'rem' with 'px' fallback.
//
@mixin height( $height: null ) {
height: $height;
height: calc-rem($height);
}
// 06. Breakpoints
// ===========================================
// Media Only
@mixin media( $width, $upper: false ) {
@if $upper == true {
@media screen and (min-width: $width + 1) {
@content;
}
} @else {
@media screen and (max-width: $width) {
@content;
}
}
}
// Max Width
//
// Default following variables in your _variabls.scss file:
// $media-exlarge : 1400px;
// $mq-large : 992px;
// $mq-medium : 767px;
// $mq-small : 480px;
//
@mixin bp-x-large {
@media screen and (max-width: $mq-extra-large) {
@content;
}
}
@mixin bp-large {
@media screen and (max-width: $mq-large) {
@content;
}
}
@mixin bp-medium {
@media screen and (max-width: $mq-medium) {
@content;
}
}
@mixin bp-small {
@media screen and (max-width: $mq-small) {
@content;
}
}
@mixin bp-x-small {
@media screen and (max-width: $mq-extra-small) {
@content;
}
}
// Min Width
@mixin bp-x-large-min {
@media screen and (min-width: $mq-extra-large + 1) {
@content;
}
}
@mixin bp-large-min {
@media screen and (min-width: $mq-large + 1) {
@content;
}
}
@mixin bp-medium-min {
@media screen and (min-width: $mq-medium + 1) {
@content;
}
}
@mixin bp-small-min {
@media screen and (min-width: $mq-small + 1) {
@content;
}
}
@mixin bp-x-small-min {
@media screen and (min-width: $mq-small + 1) {
@content;
}
}
// 07. Opacity
// ===========================================
@mixin opacity( $opacity ) {
$opacity-ie: $opacity * 100;
opacity: $opacity;
filter: alpha(opacity=$opacity-ie); //IE8
}
// 08. Vertically Centered
// ===========================================
//
// $height: add fixed height (must)
// $selector: add child selector to assign "vertical-align: middle;" (optional)
//
@mixin vertical-center( $height, $selector: null ) {
display: block;
height: $height;
@if $selector != null {
#{$selector} {
vertical-align: middle;
}
}
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
// 09. Position
// ===========================================
@mixin position( $position: 'absolute', $width: null, $height: null, $top: null, $right: null, $bottom: null, $left: null, $index: null ) {
position: #{$position};
width: $width;
height: $height;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
z-index: $index;
}
// 10. Background Position
// ===========================================
@mixin background( $color: null, $repeat: null, $size: null, $position: null, $attachment: null ) {
background-color: $color;
background-repeat: #{$repeat};
background-size: #{$size};
background-attachment: #{$attachment};
background-position: $position;
}
// 11. Background Opacity
// ===========================================
@mixin background-opacity( $color, $opacity: 0.85 ) {
background-color: $color;
background-color: rgba($color, $opacity);
}
// 12. Pixel to Percentage
// ===========================================
//
// Depending on the container's width
// Can set $container to any value, e.g. 1000px
// And the percentage will be calculated
// based on container's value
//
@function per-calc( $width, $container: $container-width ) {
@return percentage($width / $container);
}
// 13. Center with Width
// ===========================================
//
// @param $width specifies the width you want for an element
// @param $margin-left set either to left, right or auto, default 'auto'
// @param $margin-right set either to left, right or auto, default 'auto'
//
@mixin center-with-width( $width, $margin-left: auto, $margin-right: auto ) {
max-width: $width;
max-width: calc-rem( $width );
margin-left: $margin-left;
margin-right: $margin-right;
}
// 14. Grids
// ===========================================
//
// This mixin will create a grid with the number of columns given. Columns
// numbers will be in English e.g. 'five' or 'seven' and up to 'twelve'
//
// @param $number enter the number of columns you want to create.
// @param $gutter enter the gutter value in pixels or percentage.
// @param $row-class enter the class for your row, e.g. 'w-row'
//
// Example
//
// @include grid( 6, 10px, '.w-row' );
//
@mixin grid( $number, $gutter, $row-class ) {
$column-number: $number + 1;
$columns: (
"one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"
);
.#{$row-class} {
@extend %clearfix;
margin-left: -$gutter;
margin-right: -$gutter;
margin-bottom: $gutter;
&-column {
float: left;
padding-left: $gutter;
padding-right: $gutter;
@for $i from 1 to $column-number {
&-#{ nth( $columns, $i ) } {
width: ( 100% * $i ) / $number;
}
}
}
}
}
// 15. Font Size Pixel to Percentage
// ===========================================
@function font-per-base ( $size, $base: $f-size-root ) {
@return percentage($size / $base);
}
// 16. Remove the unit of a length
// ===========================================
@function strip-unit ( $number ) {
@if type-of( $number ) == 'number' and not unitless( $number ) {
@return $number / ( $number * 0 + 1 );
}
@return $number;
}
// 17. Flexbox Container
// ===========================================
@mixin flex-container( $hor: center, $ver: center, $bp: 'medium' ) {
@include display( table-cell );
@include display( flex );
@include justify-content( $hor );
@include align-items( $ver );
@if $bp == 'large' {
@include bp-large {
@include flex-direction( column );
}
} @else if $bp == 'medium' {
@include bp-medium {
@include flex-direction( column );
}
} @else if $bp == 'small' {
@include bp-small {
@include flex-direction( column );
}
} @else if $bp == 'extra-small' {
@include bp-medium {
@include flex-direction( column );
}
}
// Remove the clearfix.
&:before, &:after {
content: '';
display: none;
}
}
// 18. Primary Gradient
// ===========================================
@mixin primary-gradient() {
background-color: mix( $color-sec, #3071ff );
background: -moz-radial-gradient(circle at 0 100%, $color-sec, #3071ff);
background: -webkit-radial-gradient(center, ellipse cover, #3eccff 0%,#3071ff 100%circle at 0 100%, $color-sec, #3071ff);
background: radial-gradient(circle at 0 100%, $color-sec, #3071ff);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3eccff', endColorstr='#3071ff',GradientType=1 );
}
// 19. Aspect Ratio
// ===========================================
@function aspect-ratio( $value ) {
$width: nth( $value, 1 );
$height: $width;
@if length( $value ) > 1 {
$height: nth( $value, 2 );
}
@return ( $height / $width ) * 100%;
}
// 20. Single Button
// ===========================================
@mixin single-button( $bg, $bg-hover, $text: #fff ) {
background-color: $bg;
color: $text;
&:after {
background-color: $bg-hover;
}
&:hover,
&:active {
color: $text;
// Background color on touch devices
.touchevents & {
background-color: $bg-hover;
}
}
}
// 21. Make Grid
// ===========================================
//
// 21 (i). Make Row
//
@mixin make-row( $gutter: $container-gutter, $clearfix: false ) {
@if $clearfix { @extend %clearfix; }
@include margin( -$gutter, 'left' );
@include margin( -$gutter, 'right' );
}
//
// 21 (i). Make Columns
//
@mixin make-columns( $number, $gutter: $container-gutter, $bp: medium, $flex: false ) {
// If not flex.
@if $flex == true {
// If floats.
} @else {
@include padding( $gutter, 'left' );
@include padding( $gutter, 'right' );
// if the breakpoint is 'large', i.e., 991
@if $bp == large {
@include bp-large-min {
float: left;
width: 100% / $number;
}
// if the breakpoint is 'medium', i.e., 767
} @else if $bp == medium {
@include bp-medium-min {
float: left;
width: 100% / $number;
}
// if the breakpoint is 'small', i.e., 480
} @else if $bp == small {
@include bp-small-min {
float: left;
width: 100% / $number;
}
}
}
}
// =================================================
// assets/scss/_variables.scss
// =================================================
//
// Colors
//
$color-prim : #f1a948;
$color-prim-hover : darken( $color-prim, 8% );
$color-sec : #3eccff;
$color-sec-hover : darken( $color-sec, 8% );
$color-danger : #ff0033;
$color-danger-hover : darken( $color-danger, 8% );
$color-green : #53E8A8;
$color-green-hover : darken( $color-green, 8% );
$color-grey : #777b85;
$color-grey-hover : darken( $color-grey, 8% );
$color-dark : #0f1f31;
$color-light : #b7bcc9;
$color-lighter : #e4e5e7;
// Colors: Text
$color-text-light : $color-grey;
$color-text-base : #596370;
$color-text-dark : $color-dark;
// Colors: Headlines
$color-headlines : $color-dark;
// Colors: Links
$color-link-default : $color-prim;
$color-link-hover : $color-prim-hover;
// Colors: Navbar Links
$navbar-link-color : #fff;
$navbar-link-color-hover : #fff;
// Colors: Backgrounds
$color-prim-bg : $color-prim;
$color-sec-bg : $color-sec;
$color-dark-bg : $color-dark;
$color-light-bg : $color-light;
$color-dark-bg-text : #fff;
// Colors: Forms Background Color
$color-bg-form : #ebfaff;
// Colors: Lines
$color-line-primary : $color-prim-2;
//
// Font Family
//
$f-family-default : 'Open Sans', Arial, Helvetica, sans-serif;
$f-family-sans-serif : $f-family-default;
$f-family-serif : 'Times New Roman', Times, Serif;
$f-family-headings : $f-family-serif;
//
// Font Size
//
// Font Size: Base
$f-size-root : 10px;
$f-size-base : 16px;
$f-size-x-large : round( $f-size-base * 1.5625 );
$f-size-large : round( $f-size-base * 1.25 );
$f-size-small : round( $f-size-base * 0.875 );
// Font Size: Buttons
$f-size-button : $f-size-base;
$f-size-button-small : round($f-size-button * 0.8);
$f-size-button-large : round($f-size-button * 1.2);
// Font Size: Inputs
$f-size-input : 16px;
$f-size-input-small : 14px;
$f-size-input-large : 28px;
// Font Size: Headings
$f-size-h1 : 65px;
$f-size-h2 : 40px;
$f-size-h3 : 24px;
$f-size-h4 : 20px;
$f-size-h5 : 16px;
$f-size-h6 : 14px;
// Font Size: Section Description
$f-size-sec-desc : 26px;
$f-size-sec-desc-large : 30px;
$f-size-sec-desc-small : 22px;
//
// Line Height
//
// Line Height: Base
$line-height-base : 1.9;
$line-height-headings : normal;
//
// Fonts Weight
//
$f-weight-thin : 100;
$f-weight-extra-light : 200;
$f-weight-light : 300;
$f-weight-normal : 400;
$f-weight-medium : 500;
$f-weight-semi-bold : 600;
$f-weight-bold : 700;
$f-weight-extra-bold : 800;
//
// Media Query Sizes
//
$mq-extra-large : 1400px;
$mq-large : 991px;
$mq-medium : 767px;
$mq-small : 480px;
$mq-extra-small : 320px;
//
// Container Size
//
$container-width : 1076px;
$container-gutter : 20px;
$grid-gutter : 15px;
//
// Paths
//
$path-image : 'assets/images';
$path-font : 'assets/fonts';
//
// Border Radius
//
$border-radius-base : 2px;
$border-radius-small : 1px;
$border-radius-large : 5px;
//
// Box Shadow
//
$box-shadow-base : 0 15px 40px rgba( #000, .15 );
//
// Transitions
//
$transition-extend : ' all ease-in-out';
$transition-base : '0.25s' $transition-extend;
$transition-fast : '0.15s' $transition-extend;
$transition-slow : '0.35s' $transition-extend;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment