Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS: mixin boilerplate
/* =========== 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
You can’t perform that action at this time.