Skip to content

Instantly share code, notes, and snippets.

@sethta
Last active May 20, 2019 21:59
Show Gist options
  • Save sethta/686da787a5e87b5a3ea9c6c45d573e6f to your computer and use it in GitHub Desktop.
Save sethta/686da787a5e87b5a3ea9c6c45d573e6f to your computer and use it in GitHub Desktop.
Sass Mixins
// `@include @clearfix()` will add a clearfix to the CSS
@mixin clearfix {
&:after {
display: table;
clear: both;
content: '';
}
}
// `@include font-size(18)` will add both a 18rem font size and a 18px fallback
@mixin font-size($sizeValue: 18) {
font-size: stripUnits($sizeValue) + px;
font-size: calcRem($sizeValue);
}
// `@include respond-under(1200px)` will affect screens 1200px wide and under
@mixin respond-under($res) {
@media screen and (max-width: $res) {
@content;
}
}
// `@include respond-over(1200px)` will affect screens 1200px wide and over
@mixin respond-over($res) {
@media screen and (min-width: $res) {
@content;
}
}
// `@include visited()` will affect all links and visited links
@mixin visited() {
&,
&:visited {
@content;
}
}
// `@include hover()` will affect all hovered, focused, and active links
@mixin hover($active: false) {
@if ($active == 'all') {
&,
&:hover,
&:active,
&:focus,
&:focus-within {
@content;
}
}
@else if ($active) {
&:hover,
&:active,
&:focus,
&:focus-within {
@content;
}
}
@else {
&:hover,
&:focus,
&:focus-within {
@content;
}
}
}
// `@include css-var('color','color-body', red)` will add a css variable call to --mv-trellis-color-body, with a fallback color
@mixin css-var($property, $css-var, $default) {
#{$property}: $default;
#{$property}: var(--mv-trellis-#{$css-var}, $default);
}
// `@include transition(color background-color)` will add the full transition value for both color and background-color
@mixin transition($properties, $duration: $transition-duration, $timing: $transition-timing) {
$transition: null;
@each $property in $properties {
$transition: append($transition, $property $duration $timing, comma);
}
transition: $transition;
}
// `@include aspect-ratio()` force an apect ration on absolutely positioned child elements
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
width: 100%;
padding-top: ($height / $width) * 100%;
content: '';
}
}
@mixin screen-reader( $show-focus: false ) {
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
// Many screen reader and browser combinations announce broken words as they would appear visually.
word-wrap: normal !important;
clip-path: inset(50%);
@if ( $show-focus ) {
&:focus {
// Above WP toolbar.
display: block;
clip: auto !important;
z-index: 1000000;
top: ($gutter / 4);
left: ($gutter / 4);
width: auto;
height: auto;
padding: 15px 23px 14px;
color: #444;
background-color: #eee;
font-size: 1em;
line-height: normal;
text-decoration: none;
clip-path: none;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment