Last active
November 12, 2017 07:07
-
-
Save agent-simon-s/ad3b0540a2968bb3bda367bead03a393 to your computer and use it in GitHub Desktop.
SCSS: mixin boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* =========== Mixins ============== */ | |
/* | |
sjds 2017-11-10 Compiled from experiance & | |
Borrowing heavily from those before | |
*/ | |
/* | |
need to add clamp | |
responsive ratio | |
placeholder | |
hardware? | |
*/ | |
/* -------- Clearfix polyfill Mixin ----------- */ | |
/* -------------------------------------------- */ | |
/* Usage: | |
*{ @include set-clearfix; } */ | |
/* Output: | |
*:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
*/ | |
@mixin set-clearfix { | |
&:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
} | |
/* --------- box-sizing Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-ox-sizing(border-box); | |
} */ | |
/* Output: | |
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
*/ | |
@mixin set-box-sizing($box-mod) { | |
-webkit-box-sizing: $box-mod; // Safari <= 5 | |
-moz-box-sizing: $box-mod; // Firefox <= 19 | |
box-sizing: $box-mod; | |
} | |
/* --------- set-fontface Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-fontface("MyFont", "path/to/MyFont", $style: normal, $weight: normal); | |
} */ | |
/* Output: | |
* { | |
font-family: "MyFont"; | |
src: url("path/to/MyFont.eot"); | |
src: url("path/to/MyFont.eot?#iefix") format("embedded-opentype"), url("path/to/MyFont.woff") format("woff"), url("path/to/MyFont.ttf") format("truetype"), url("path/to/MyFont.svg#MyFont") format("svg"); | |
font-weight: normal; | |
font-style: normal; | |
} | |
*/ | |
@mixin set-fontface($font-name, $file-name, $weight: normal, $style: normal) { | |
@font-face { | |
font-family: quote($font-name); | |
src: url($file-name + '.eot'); | |
src: url($file-name + '.eot?#iefix') format('embedded-opentype'), | |
url($file-name + '.woff') format('woff'), | |
url($file-name + '.ttf') format('truetype'), | |
url($file-name + '.svg##{$font-name}') format('svg'); | |
font-weight: $weight; | |
font-style: $style; | |
} | |
} | |
/* evaluate the tree font mixins we have across our projects | |
@mixin font-source-sans($size: false, $colour: false, $weight: false, $lh: false) { | |
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; | |
@if $size { font-size: $size; } | |
@if $colour { color: $colour; } | |
@if $weight { font-weight: $weight; } | |
@if $lh { line-height: $lh; } | |
} | |
*/ | |
/* --------- Media query Mixin ------------- */ | |
/* ------------------------------------------- */ | |
// NOTE: requires definition of map $breakpoints in vars | |
/* Usage: | |
* { | |
font-size: 12rem; | |
@include respondto(small){ | |
font-size: 14rem; | |
} | |
} */ | |
/* Output: | |
* { | |
font-size: 12rem; | |
} | |
@media (min-width: 560px) { | |
.element { | |
font-size: 14rem; | |
} | |
} | |
*/ | |
@mixin respond-to($breakpoint) { | |
// If the key exists in the map | |
@if map-has-key($breakpoints, $breakpoint) { | |
// Prints a media query based on the value | |
@media #{inspect(map-get($breakpoints, $breakpoint))} { | |
@content; | |
} | |
} | |
// If the key doesn't exist in the map | |
@else { | |
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " | |
+ "Available breakpoints are: #{map-keys($breakpoints)}."; | |
} | |
} | |
//New version in progress | |
/* | |
@mixin respondto($size, $bracket:only) { | |
@if $bracket == up { | |
@if $size == small { | |
@media only screen and (min-width: #map-get{($breakpoints, $xs-v-sm)}) { | |
@content; | |
} | |
} | |
@else $size == medium { | |
@media only screen and (min-width: $sm-v-md) { | |
@content; | |
} | |
} | |
} | |
@else $bracket == down { | |
} | |
@else $bracket == only { | |
} | |
@else $bracket == down { | |
} | |
} | |
*/ | |
/* | |
2do: evaluating | |
@mixin hardware($backface: true, $perspective: 1000) { | |
@if $backface { | |
backface-visibility: hidden; | |
} | |
perspective: $perspective; | |
} | |
*/ | |
/* --------- set-z Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
needs list -- 2DO update to map | |
$z-indexes: ( | |
"outdated-browser", | |
"modal", | |
"site-header", | |
"page-wrapper", | |
"site-footer" | |
); | |
* { | |
z-index: set-z('site-header'); | |
} */ | |
/* Output: | |
* { | |
} | |
*/ | |
@function set-z($name) { | |
@if index($z-indexes, $name) { | |
@return (length($z-indexes) - index($z-indexes, $name)) + 1; | |
} @else { | |
@warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}'; | |
@return null; | |
} | |
} | |
/* --------- Rem translation Fn & Mixin ----------- */ | |
/* ------------------------------------------------ */ | |
// NOTE: requires definition of $font-size-base in vars | |
/* Usage: assuming $font-size-base: 12px; | |
* { | |
@include set-fontsize(24px); | |
} */ | |
/* Output: | |
* { | |
font-size: 24px; | |
font-size: 2rem; | |
} | |
*/ | |
@function calculateRem($size) { | |
$remSize: $size / $font-size-base; | |
@return $remSize * 1rem; | |
} | |
@mixin set-fontsize($size, $base: 14) { | |
font-size: $size; | |
font-size: calculateRem($size); | |
} | |
/* --------- Absolute Pos Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-absolute($top: auto, $right: auto, $bottom: auto, $left: auto); | |
} */ | |
/* Output: | |
* { | |
top: 10px; | |
right: 10px; | |
bottom: 5px; | |
left: 15px; | |
position: absolute; | |
} | |
*/ | |
@mixin set-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) { | |
top: $top; | |
right: $right; | |
bottom: $bottom; | |
left: $left; | |
position: absolute; | |
} | |
/* --------- set-position Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include relative; | |
} | |
.sub-menu { | |
@include absolute(top 100% left 0); | |
} | |
.sticky-bar { | |
@include fixed(top 0 left 0); | |
} | |
*/ | |
/* Output: | |
* { | |
} | |
*/ | |
@mixin set-position($position, $args) { | |
@each $o in top right bottom left { | |
$i: index($args, $o); | |
@if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number { | |
#{$o}: nth($args, $i + 1); | |
} | |
} | |
position: $position; | |
} | |
@mixin absolute($args: '') { | |
@include set-position(absolute, $args); | |
} | |
@mixin fixed($args: '') { | |
@include set-position(fixed, $args); | |
} | |
@mixin relative($args: '') { | |
@include set-position(relative, $args); | |
} | |
/* --------- set-center Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-center(inline-block); | |
} */ | |
/* Output: | |
* { | |
display: inline-block; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
*/ | |
@mixin set-center($type:block) { | |
display: $type; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
/* --------- set-vertical-center Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-vertical-center(); | |
} */ | |
/* Output: | |
* { | |
@include center-vertically; | |
} | |
*/ | |
@mixin set-vertical-center() { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
@include prefix(transform, translate(-50%, -50%), 'webkit' 'ms'); | |
} | |
/* --------- set-responsive-ratio Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-responsive-ratio(16,9); | |
} */ | |
/* Output: | |
* { | |
} | |
*/ | |
@mixin set-responsive-ratio($x,$y, $pseudo: false) { | |
$padding: unquote( ( $y / $x ) * 100 + '%' ); | |
@if $pseudo { | |
&:before { | |
@include pseudo($pos: relative); | |
width: 100%; | |
padding-top: $padding; | |
} | |
} @else { | |
padding-top: $padding; | |
} | |
} | |
/* --------- set-triangle Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-triangle(); | |
} */ | |
/* Output: | |
* { | |
} | |
*/ | |
@mixin set-triangle($color, $direction, $size: 6px, $position: absolute, $round: false) { | |
@include set-psudo-elem($pos: $position); | |
width: 0; | |
height: 0; | |
@if $round { | |
border-radius: 3px; | |
} | |
@if $direction == down { | |
border-left: $size solid transparent; | |
border-right: $size solid transparent; | |
border-top: $size solid $color; | |
margin-top: 0 - round( $size / 2.5 ); | |
} @else if $direction == up { | |
border-left: $size solid transparent; | |
border-right: $size solid transparent; | |
border-bottom: $size solid $color; | |
margin-bottom: 0 - round( $size / 2.5 ); | |
} @else if $direction == right { | |
border-top: $size solid transparent; | |
border-bottom: $size solid transparent; | |
border-left: $size solid $color; | |
margin-right: -$size; | |
} @else if $direction == left { | |
border-top: $size solid transparent; | |
border-bottom: $size solid transparent; | |
border-right: $size solid $color; | |
margin-left: -$size; | |
} | |
} | |
/* --------- set-psudo-ele Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-psudo-elem(); | |
} */ | |
/* Output: | |
div::after { | |
@include pseudo; | |
top: -1rem; left: -1rem; | |
width: 1rem; height: 1rem; | |
} | |
*/ | |
@mixin set-psudo-elem($pos,$display,$content ) { | |
content: $content; | |
display: $display; | |
position: $pos; | |
} | |
/* --------- set-placholder Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-placholder(color: $grey;); | |
} */ | |
/* Output: | |
* { | |
placeholder: $grey; | |
:-moz-placeholder: $grey; | |
::-moz-placeholder: $grey; | |
:-ms-input-placeholder: $grey; | |
::-webkit-input-placeholder: $grey; | |
} | |
*/ | |
@mixin set-placholder() { | |
&.placeholder { @content; } | |
&:-moz-placeholder { @content; } | |
&::-moz-placeholder { @content; } | |
&:-ms-input-placeholder { @content; } | |
&::-webkit-input-placeholder { @content; } | |
} | |
/* --------- set-text-hidden Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-text-hidden(); | |
} */ | |
/* Output: | |
* { | |
} | |
*/ | |
@mixin set-hidden-text() { | |
font: 0/0 a; | |
color: transparent; | |
text-shadow: none; | |
background-color: transparent; | |
border: 0; | |
} | |
/* --------- Opacity Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-opacity(0.8); | |
} */ | |
/* Output: | |
* { | |
opacity: 0.8; | |
filter: alpha(opacity=80); | |
} | |
*/ | |
@mixin set-opacity($opacity) { | |
opacity: $opacity; | |
$opacity-ie: $opacity * 100; | |
filter: alpha(opacity=$opacity-ie); //IE8 | |
} | |
/* --------- Set-bg-gradient Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-bg-gradient(#07c, #06f, vertical); | |
} */ | |
/* Output: | |
* { | |
background: #07c; | |
background: -webkit-linear-gradient(top, #07c, #06f); | |
background: linear-gradient(to bottom, #07c, #06f); | |
} | |
*/ | |
@mixin set-bg-gradient($start-color, $end-color, $orientation:vertical) { | |
background: $start-color; | |
@if $orientation == 'vertical' { | |
background: -webkit-linear-gradient(top, $start-color, $end-color); | |
background: linear-gradient(to bottom, $start-color, $end-color); | |
} @else if $orientation == 'horizontal' { | |
background: -webkit-linear-gradient(left, $start-color, $end-color); | |
background: linear-gradient(to right, $start-color, $end-color); | |
} @else { | |
background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); | |
background: radial-gradient(ellipse at center, $start-color, $end-color); | |
} | |
} | |
/* --------- Transition Mixin ------------- */ | |
/* ------------------------------------------- */ | |
/* Usage: | |
* { | |
@include set-transition( all, 0.6s, ease-in-out); | |
} */ | |
/* Output: | |
* { | |
-webkit-transition: all 0.2s ease-in-out; | |
-moz-transition: all 0.2s ease-in-out; | |
-ms-transition: all 0.2s ease-in-out; | |
-o-transition: all 0.2s ease-in-out; | |
transition: all 0.2s ease-in-out; | |
} | |
*/ | |
@mixin set-transition($transition-property, $transition-time, $method) { | |
-webkit-transition: $transition-property $transition-time $method; | |
-moz-transition: $transition-property $transition-time $method; | |
-ms-transition: $transition-property $transition-time $method; | |
-o-transition: $transition-property $transition-time $method; | |
transition: $transition-property $transition-time $method; | |
} | |
/* -------- Retina image Handling ------------- */ | |
/* -------------------------------------------- */ | |
//Usage: | |
// .logo { | |
// background-image: url("img/logo.png"); | |
// @include set-retina("img/logo@2x.png", 100px, 21px); | |
// } | |
//Output: | |
// @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { | |
// .logo { | |
// /* Serving HQ image on Retina display */ | |
// background-image: url("img/logo@2x.png"); | |
// background-size: 100px 21px; | |
// } | |
// } | |
@mixin set-retina($image, $width, $height) { | |
@media (min--moz-device-pixel-ratio: 1.3), | |
(-o-min-device-pixel-ratio: 2.6/2), | |
(-webkit-min-device-pixel-ratio: 1.3), | |
(min-device-pixel-ratio: 1.3), | |
(min-resolution: 1.3dppx) { | |
/* Serving 2x image on Retina display */ | |
background-image: url($image); | |
background-size: $width $height; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment