My Mixins & Functions
/**
* Mixins & Functions
*/
@function get-vw($target) {
$vw-context: (1000*.01) * 1px;
@return ($target/$vw-context) * 1vw;
}
@mixin responsive-font($init, $scaled) {
font-size: $init;
@media screen and ($tablet) {
font-size: $scaled;
}
}
@mixin responsive-window($bg) {
position: relative;
height: 100vh;
background: $bg;
}
@mixin align-hack {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@mixin randomizer($multiple, $lum) {
@for $i from 1 through 110 {
&:nth-child(#{$i}) {
background: hsl($multiple * $i, 100%, $lum);
}
}
}
@mixin vw($base-size, $break-size, $breakpoint) {
font-size: get-vw($base-size);
letter-spacing: -1px;
@media screen and ($breakpoint) {
font-size: $break-size;
}
}
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
Written by Cameron White
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Sass
Authors
Related Tags
#sass
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#