Last active
July 18, 2018 15:23
-
-
Save ltrademark/48dc4e302bea16bfb3816ea98868d955 to your computer and use it in GitHub Desktop.
master SASS functions, mixins, variables, and so on
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
// functions | |
@function font($to, $from, $toWidth, $fromWidth) { | |
$slope: ($to - $from) / ($toWidth - $fromWidth); | |
$base: $from - $slope * $fromWidth; | |
@return calc(#{$base} + #{100vw * $slope}); | |
} | |
@function convert($val, $base-font: $font-large) { | |
// This works in conjunction to the `font` function when sizing | |
// text, since its working off the basis of `1em` when converting. | |
// | |
// In order for this to work, a base/root font must be declared. | |
// This function defines the root font with $font-large in $base-font. | |
// That variable can be swapped for another variable. | |
@if type-of($base-font) == 'number' and not unitless($base-font) { | |
// This @if makes sure your base-font will always be a raw number. | |
$base-font: $base-font / ($base-font * 0 + 1); | |
} | |
@if unitless($val) { | |
// Here I makes sure you always include a unit. Current units | |
// supported are listed in the paren below. | |
@error $val + " needs a unit (px, em, rem)"; | |
} @else { | |
@if unit($val) == 'px' { | |
// converts $val to em | |
$font-size: $val / ($val * 0 + 1); | |
@return ($font-size / $base-font)+0em; | |
} | |
@if unit($val) == 'em' or unit($val) == 'rem' { | |
// converts $val to px's | |
$font-size: $val / ($val * 0 + 1); | |
@return ($font-size * $base-font)+0px; | |
} | |
} | |
} | |
@function get-vw($object) { | |
$vw: (1024 * 0.01) * 1px; | |
@return ($object / $vw) * 1vw; | |
} | |
@function shadow($depth, $c: #000) { | |
@if $depth>10 { | |
$depth: 10; | |
@warn 'cant be greater than 10'; | |
} | |
@return 0 $depth + px ($depth * 2) + px rgba($c, (0.2 - $depth * 0.0002)); | |
} | |
@function better-blur($radius) { | |
@return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1'%3E%3CfeGaussianBlur stdDeviation='#{$radius}' result='b'/%3E%3CfeMorphology operator='dilate' radius='#{$radius}'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#a"); | |
} | |
@function unitstrip($num) { | |
@if type-of($num) == 'number' and not unitless($num) { | |
@return $num / ($num * 0+1); | |
} | |
@return $num; | |
} | |
@function contrast($c, $darker, $lighter, $threshold: 50) { | |
@if $threshold>100 { | |
// @error "cant be over 100"; | |
$threshold: 100; | |
} | |
@if (lightness($c) >$threshold) { | |
@return $darker; | |
} @else { | |
@return $lighter; | |
} | |
} | |
@function randomNum($min, $max, $unit) { | |
$rand: random(); | |
$randomNum: $min + floor($rand * (($max - $min) + 1)); | |
@if $unit== '%' { | |
@return $randomNum * 1 + $unit; | |
} | |
@if type-of($unit) == 'number' { | |
@error 'unit must be px, pc, em, ch, %, in, cm, and so on.'; | |
} | |
@return $randomNum + $unit; | |
} | |
@function hex() { | |
$smplHex: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'); | |
$randomHEX: ('#') + nth($smplHex, random(length($smplHex))) + | |
nth($smplHex, random(length($smplHex))) + | |
nth($smplHex, random(length($smplHex))) + | |
nth($smplHex, random(length($smplHex))) + | |
nth($smplHex, random(length($smplHex))) + | |
nth($smplHex, random(length($smplHex))); | |
@return unquote($randomHEX); | |
} | |
// variables | |
$near: 225ms; | |
$far: 375ms; | |
$bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
$curve: cubic-bezier(0.4, 0, 0.2, 1); | |
$ease-in: cubic-bezier(0.4, 0, 1, 1); | |
$ease-out: cubic-bezier(0, 0, 0.2, 1); | |
$snap: cubic-bezier(0.785, 0.135, 0.15, 0.86); | |
$small: 320 !default; | |
$medium: 600 !default; | |
$large: 720 !default; | |
$breakpoints: ( | |
small: $small + px, | |
medium: $medium + px, | |
large: $large + px | |
); | |
// Typography | |
$font-stack: (sans-serif); | |
// mixins | |
@mixin respond-to($breakpoint) { | |
@if map-has-key($breakpoints, $breakpoint) { | |
$value: map-get($breakpoints, $breakpoint); | |
@media screen and (max-width: $value) { | |
@content; | |
} | |
} | |
@warn 'Unknown `#{$breakpoint}` in $breakpoints'; | |
} | |
@mixin checker-board($color1: #ccc, $color2: #fff, $size: 50) { | |
background-color: $color2; | |
background-image: linear-gradient(45deg, $color1 25%, transparent 25%), | |
linear-gradient(-45deg, $color1 25%, transparent 25%), | |
linear-gradient(45deg, transparent 75%, $color1 75%), | |
linear-gradient(-45deg, transparent 75%, $color1 75%); | |
background-size: $size + 0px $size + 0px; | |
background-position: 0 0, 0 ($size / 2)+0px, | |
($size / 2) + px ($size / 2 * -1) + px, -($size / 2)+0px 0px; | |
} | |
@mixin dotgrid( | |
$dot: #aaa, | |
$dot-background: #000, | |
$dot-size: 1px, | |
$dot-spacing: 22px | |
) { | |
background: linear-gradient( | |
90deg, | |
$dot-background ($dot-spacing - $dot-size), | |
transparent 1% | |
) | |
center, | |
linear-gradient($dot-background ($dot-spacing - $dot-size), transparent 1%) | |
center, | |
$dot; | |
background-size: $dot-spacing $dot-spacing; | |
background-position: center; | |
} | |
@mixin gradient-border($color1, $color2, $border-width, $direction) { | |
-webkit-appearance: none; | |
border: none; | |
background-repeat: no-repeat; | |
background-image: linear-gradient(#{$direction}, $color1 0%, $color2 100%), | |
linear-gradient(#{$direction}, $color1 0%, $color2 100%); | |
@if $direction== 'to right' or $direction== 'to left' { | |
@if $direction== 'to right' { | |
border-left: $border-width solid $color1; | |
border-right: $border-width solid $color2; | |
} @else { | |
border-left: $border-width solid $color2; | |
border-right: $border-width solid $color1; | |
} | |
background-position: 0 0, 0 100%; | |
background-size: 100% $border-width; | |
} | |
@if $direction== 'to top' or $direction== 'to bottom' { | |
@if $direction== 'to top' { | |
border-top: $border-width solid $color2; | |
border-bottom: $border-width solid $color1; | |
} @else { | |
border-top: $border-width solid $color1; | |
border-bottom: $border-width solid $color2; | |
} | |
background-position: 0 0, 100% 0; | |
background-size: $border-width 100%; | |
} | |
background-color: transparent; | |
outline: none; | |
&::-webkit-input-placeholder { | |
color: rgba(#fff, 0.2); | |
font-family: sans-serif; | |
transition: all 225ms ease-in-out; | |
} | |
} | |
@mixin grid( | |
$col: 4, | |
$row: $col, | |
$gWidth: 300px, | |
$gHeight: $gWidth, | |
$gap: 10px | |
) { | |
$space: unquote(' '); | |
$templateCols: unquote(''); | |
$templateRows: unquote(''); | |
@for $i from 1 through $col { | |
$templateCols: $templateCols + $space $gWidth; | |
} | |
@for $i from 1 through $row { | |
$templateRows: $templateRows + $space $gHeight; | |
} | |
display: grid; | |
grid-template-columns: $templateCols; | |
grid-template-rows: $templateRows; | |
grid-gap: $gap; | |
@content; | |
} | |
@mixin grid-pos($colStart, $rowStart, $colEnd, $rowEnd, $target: '') { | |
@if $target != '' { | |
#{$target} { | |
grid-column-start: $colStart; | |
grid-row-start: $rowStart; | |
grid-column-end: $colEnd; | |
grid-row-end: $rowEnd; | |
} | |
} @else { | |
grid-column-start: $colStart; | |
grid-row-start: $rowStart; | |
grid-column-end: $colEnd; | |
grid-row-end: $rowEnd; | |
} | |
} | |
@mixin webkit-scrollbar($c: $white, $d: 'h', $s: 4) { | |
&::-webkit-scrollbar { | |
@if $d == 'h' { | |
width: $s + px; | |
} | |
@if $d == 'v' { | |
height: $s + px; | |
} | |
&-thumb { | |
background-color: rgba($c, 0.54); | |
border-radius: ($s / 2)+0px; | |
} | |
&-track { | |
background-color: rgba($c, 0.1); | |
border-radius: ($s / 2)+0px; | |
} | |
} | |
} | |
@mixin line-clamp($lines) { | |
@if $lines < 2 { | |
display: inline-block; | |
height: $lines + 0em; | |
text-overflow: ellipses; | |
white-space: nowrap; | |
} @else { | |
display: -webkit-box; | |
height: $lines + 0em; | |
-webkit-line-clamp: $lines; | |
-webkit-box-orient: vertical; | |
} | |
overflow: hidden; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment