Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Some of my go-to sass mixins/functions. #prettycool.
/// Screen breakpoints for media queries
$breakpoints: (
'medium': 40em,
'large': 64em,
'xlarge': 75em,
'xxlarge': 90em
) !default;
/// Mixin to manage responsive breakpoints
/// @link https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin mq($breakpoint) {
// If the key exists in the map
@if map-has-key( $breakpoints, $breakpoint ) {
// Prints a media query based on the value
@media ( min-width: 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)}.";
}
}
// Block center content
@mixin center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Apply clearfix
@mixin clearfix {
&:after {
content: "";
display: table;
table-layout: fixed;
}
}
// Good for when you want to use responsive divs as images
@mixin thumb_bg( $size: cover, $position: center, $repeat: no-repeat ) {
background-size: $size;
background-position: $position;
background-repeat: $repeat;
}
// #prettyycool
@mixin responsive_shape( $width: 100%, $ratio: 100%, $content-padding: 0 ) {
position: relative;
width: $width;
&:after {
content: "";
display: block;
padding-bottom: $ratio; // Change this value to affect the aspect ratio of the shape. 100% = a square!
}
}
// Screen reader text
@mixin srt {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
@mixin print_style {
@media print { @content ; }
}
// Quick link hover styles to include hover & focus
@mixin link_hover {
&:hover,
&:focus {
@content ;
}
}
// Heading mixin where all heading styles are setup!
// This allows you to keep overrides consistent with your base styles and keeps things DRY!
@mixin heading( $lvl: h2, $color: $dark-blue ) {
// Universal heading styles
color: $color;
font-family: $sans;
@if $lvl == h1 {
font-size: 24px;
letter-spacing: 2px;
line-height: 1.125;
font-weight: 300;
margin-bottom: 0.33em;
@include mq(medium) {
font-size: 44px;
}
@include mq(large) {
font-size: 64px;
}
} @else if $lvl == h2 {
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.1875;
font-weight: 500;
margin-bottom: 0.25em;
@include breakpoint(medium) {
font-size: 32px;
}
} @else if $lvl == h3 {
font-size: 19px;
text-transform: uppercase;
line-height: 1.25;
letter-spacing: 1px;
font-weight: 700;
margin-bottom: 0.375em;
@include breakpoint(medium) {
font-size: 20px;
}
} @else if $lvl == h4 {
font-size: 17px;
line-height: 1.25;
letter-spacing: 0;
font-weight: 700;
margin-bottom: 0.425em;
@include breakpoint(medium) {
font-size: 24px;
}
} @else if $lvl == h5 {
font-size: 14px;
text-transform: uppercase;
line-height: 1.25;
letter-spacing: 0.5px;
font-weight: 700;
margin-bottom: 0.625em;
}
}
/// Convert unit values to rem
$base-font-size: 16px !default;
$rem-fallback: false !default;
$rem-px-only: false !default;
@function rem-separator( $list, $separator: false ) {
@if $separator == "comma" or $separator == "space" {
@return append( $list, null, $separator );
}
@if function-exists( "list-separator" ) == true {
@return list-separator( $list );
} // list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
$test-list: ();
@each $item in $list {
$test-list: append( $test-list, $item, space );
}
@return if ( $test-list == $list, space, comma );
}
@mixin rem-baseline( $zoom: 100% ) {
font-size: $zoom / 16px * $base-font-size;
}
@function rem-convert( $to, $values... ) {
$result: ();
$separator: rem-separator( $values );
@each $value in $values {
$value: if( unitless( $value ), $value * 1px, $value );
@if type-of( $value ) == "number" and unit( $value ) == "rem" and $to == "px" {
$result: append( $result, $value / 1rem * $base-font-size, $separator );
} @else if type-of( $value ) == "number" and unit( $value ) == "px" and $to == "rem" {
$result: append( $result, $value / $base-font-size * 1rem, $separator );
} @else if type-of( $value ) == "list" {
$value-separator: rem-separator( $value );
$value: rem-convert( $to, $value... );
$value: rem-separator( $value, $value-separator );
$result: append( $result, $value, $separator );
} @else {
$result: append( $result, $value, $separator );
}
}
@return if( length( $result ) == 1, nth( $result, 1 ), $result );
}
@function rem( $values... ) {
@if $rem-px-only {
@return rem-convert( px, $values... );
} @else {
@return rem-convert( rem, $values... );
}
}
@mixin rem( $properties, $values... ) {
@if type-of( $properties ) == "map" {
@each $property in map-keys( $properties ) {
@include rem( $property, map-get( $properties, $property ) );
}
} @else {
@each $property in $properties {
@if $rem-fallback or $rem-px-only {
#{$property}: rem-convert( px, $values... );
}
@if not $rem-px-only {
#{$property}: rem-convert( rem, $values... );
}
}
}
}
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.