nicwands.com/src/styles/_functions.scss

@use 'sass:math';

/* Breakpoints */
$mobile-breakpoint: get('breakpoints.mobile');

// Viewport Sizes
$desktop-width: get('viewports.desktop.width');
$desktop-height: get('viewports.desktop.height');

$mobile-width: get('viewports.mobile.width');
$mobile-height: get('viewports.mobile.height');

// Breakpoint
@mixin mobile {
    @media (max-width: #{$mobile-breakpoint * 1px - 1px}) {
        @content;
    }
}

@mixin desktop {
    @media (min-width: #{$mobile-breakpoint * 1px}) {
        @content;
    }
}

@function mobile-vw($pixels, $base-vw: $mobile-width) {
    $px: math.div($pixels, $base-vw);
    $perc: math.div($px, 1px);
    @return calc($perc * 100vw);
}

@function mobile-vh($pixels, $base-vh: $mobile-height) {
    $px: math.div($pixels, $base-vh);
    $perc: math.div($px, 1px);
    @return calc($perc * 100vh);
}

@function desktop-vw($pixels, $base-vw: $desktop-width) {
    $px: math.div($pixels, $base-vw);
    $perc: math.div($px, 1px);
    @return calc($perc * 100vw);
}

@function desktop-vh($pixels, $base-vh: $desktop-height) {
    $px: math.div($pixels, $base-vh);
    $perc: math.div($px, 1px);
    @return calc($perc * 100vh);
}

@function columns($columns) {
    @return calc(
        (#{$columns} * var(--layout-column-width)) +
            ((#{$columns} - 1) * var(--layout-column-gap))
    );
}

@mixin child-grid($columns) {
    grid-template-columns: repeat($columns, minmax(0, 1fr));
    column-gap: var(--layout-columns-gap);
    display: grid;
}

@mixin reduced-motion {
    @media (prefers-reduced-motion: reduce) {
        @content;
    }
}

@mixin fill($position: absolute) {
    position: #{$position};
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

@mixin fade-on-ready($class: 'ready', $duration: 400ms) {
    opacity: 0;
    transition: opacity $duration ease;

    &.#{$class} {
        opacity: 1;
    }
}

// Clamp text block to number of lines
@mixin line-clamp($lines: 3, $mobile-lines: $lines) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;

    @include mobile {
        -webkit-line-clamp: $mobile-lines;
    }
}

// Flip animations
@keyframes flip-r {
    50% {
        transform: translateX(100%);
        opacity: 0;
    }
    51% {
        transform: translateX(-100%);
        opacity: 0;
    }
}
@keyframes flip-l {
    50% {
        transform: translateX(-100%);
        opacity: 0;
    }
    51% {
        transform: translateX(100%);
        opacity: 0;
    }
}
@keyframes flip-d {
    50% {
        transform: translateY(100%);
        opacity: 0;
    }
    51% {
        transform: translateY(-100%);
        opacity: 0;
    }
}
@keyframes flip-u {
    50% {
        transform: translateY(-100%);
        opacity: 0;
    }
    51% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@mixin flip-animation(
    $direction: 'r',
    $duration: 600ms,
    $easing: var(--ease-out-expo),
    $iteration-count: 1
) {
    overflow: hidden;
    animation: flip-#{$direction} $duration $easing $iteration-count forwards;
}

@mixin link-hover {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--theme-fg);
        transform-origin: left;
        transform: scaleX(0);
        transition: transform 300ms var(--ease-out-quad);
    }
    @include desktop {
        &:hover::before {
            transform: scaleX(1);
        }
    }
}

@mixin stagger-animate($stagger: 100, $num-children: 10, $base-delay: 0) {
    @for $i from 0 through $num-children {
        &:nth-child(#{$i + 1}) {
            transition-delay: #{$stagger * $i + $base-delay}ms;
        }
    }
}

@mixin hover {
    @include desktop {
        &:hover {
            @content;
        }
    }
}