DEV Community

Cover image for sass mixins that are way too good
Rubin
Rubin

Posted on

sass mixins that are way too good

#sass #css

All sass font weights: 

$font-weights: ("thin":100,"extrlight":200,"light": 300,"regular": 400, "medium": 500,"semibold":600, "bold": 700,"extrabold":800,"black":900);
Enter fullscreen mode Exit fullscreen mode

Usage: 

.selector{ font-weight: map-get($font-weights, thin); }
Enter fullscreen mode Exit fullscreen mode

Add CSS vendor prefix: 

@mixin prefix($declarations, $prefixes: ()) { @each $property, $value in $declarations { @each $prefix in $prefixes { #{'-' + $prefix + '-' + $property}: $value; } // Output standard non-prefixed declaration #{$property}: $value; } }
Enter fullscreen mode Exit fullscreen mode

Usage: 

.selector { @include prefix(( column-count: 3, column-gap: 1.5em, column-rule: 2px solid hotpink ), webkit moz); }
Enter fullscreen mode Exit fullscreen mode

Breakpoints 

$bp: ( mobile: 480px, tablet: 768px, desktop: 1440px ); @mixin query($display) { @each $key, $value in $bp { // defining min-width @if ($display == $key) { @media (min-width: $value) { @content; } } } }
Enter fullscreen mode Exit fullscreen mode

Usage: 

.selector{ display: flex; @include query(mobile) { flex-direction: column; // you can pick any value you wish. height: 500px; } }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)