Helpful SASS Mixins

@mixin font-smoothing($value: on) @if $value == on -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale @else -webkit-font-smoothing: subpixel-antialiased -moz-osx-font-smoothing: auto @mixin font-size($sizeValue: 1.6) font-size: ($sizeValue * 10) + px font-size: $sizeValue + rem @mixin aspect-ratio($width, $height) position: relative &:before display: block content: "" width: 100% padding-top: ($height / $width) * 100% > .content position: absolute top: 0 left: 0 right: 0 bottom: 0 @mixin vertical-align($position: relative) position: $position top: 50% -webkit-transform: translateY(-50%) -ms-transform: translateY(-50%) transform: translateY(-50%)
Helpful list of SASS mixins that I use with almost every project.

1 Response

Awesome, gotta use some of these; thanks :)

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.