scss SASS，SCSS mixins

Posted 2021-05-18

@mixin mobile {
  @media screen and (max-width: 28.75em) {
    @content;
  }
}
// iphone 6
@mixin mobile--small {
  @media screen and (min-width: 23em) {
    @content;
  }
}
// mobile phones in landscape, smaller tablets
@mixin mobile--large {
  @media screen and (min-width: 28.75em) {
    @content;
  }
}

// small-medium tablets
@mixin tablet--small {
  @media screen and (min-width: 40em) {
    @content;
  }
}

// medium-larger tablets / smaller desktop
@mixin tablet--large {
  @media screen and (min-width: 48em) {
    @content;
  }
}

@mixin desktop--narrow {
  @media screen and (min-width: 64em) {
    @content;
  }
}

// desktop screen / standard browsers
@mixin desktop {
  @media screen and (min-width: 80em) {
    @content;
  }
}

// larger screens
@mixin desktop--large {
  @media screen and (min-width: 92em) {
    @content;
  }
}

// Vendor prefixes
@mixin prefix($property, $value, $vendors: webkit moz ms o) {
    @if $vendors {
        @each $vendor in $vendors {
            #{"-" + $vendor + "-" + $property}: #{$value};
        }
    }

    #{$property}: #{$value};
}

@mixin prefix-value($property, $value, $vendors: webkit moz ms o) {
    @if $vendors {
        @each $vendor in $vendors {
            #{$property}: #{"-" + $vendor + "-" + $value};
        }
    }

    #{$property}: #{$value};
}

@mixin rem($property, $value) {
    #{$property}: ($value * 10) + px;
    #{$property}: $value + rem;
}

// Requires: @mixin prefix
@mixin transform($value) {
    @include prefix(transform, $value);
}

// Requires: @mixin prefix
@mixin transition($property, $duration:0.3s, $function: ease-out) {
    @include prefix(transition, $property $duration $function, moz webkit o);
}

// Requires: @mixin prefix
@mixin border-radius($width) {
    @include prefix(border-radius, $width, moz webkit);
}

// Requires: @mixin rem
@mixin line-height($value) {
    @include rem(line-height, $value)
}

// Requires: @mixin rem
@mixin font-size($value) {
    @include rem(font-size, $value)
}

// Requires: @mixin prefix
@mixin box-shadow($shadows...) {
    @include prefix(box-shadow, $shadows, moz webkit);
}

// Requires: @mixin prefix
@mixin opacity($opacity) {
    @include prefix(opacity, $opacity, moz webkit);
    zoom: 1;
    filter: alpha(opactiy=($opacity * 100));
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100})";
}

// For `ul` an `ol` tags.
@mixin list-plain {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

// Display table
@mixin display-table-row {
    display: table-row;
}

@mixin display-table-cell {
    // vertical-align: top;
    display: table-cell;
}

// Usage:
// background-image: linear-gradient(to bottom, rgba(black, 0.0), rgba(black, 0.4), rgba(black, 0.6)); 
@mixin linear-gradient($direction, $color-stops...) {
    background: nth(nth($color-stops, 1), 1);
    background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
    background: linear-gradient($direction, $color-stops);
}

@mixin display-table($row: '', $cell: '') {
    display: table;
    table-layout: fixed;
    width: 100%;

    @if $row != '' {
        > #{$row} {
            @include display-table-row;

            @if $cell != '' {
                > #{$cell} {
                    @include display-table-cell;
                }
            }
        }
    }
}

// Clearfix
@mixin clearfix {
    *zoom: 1;

    &:before,
    &:after {
      display: table;
      line-height: 0;
      content: "";
    }

    &:after {
      clear: both;
    }
}

// Breakpoint handler
// Usage:
// @media #{$screen-xs} { ... }
$screen-xxs: "(max-width: 479px)";
$screen-xs: "(max-width: 767px)";
$screen-sm: "(min-width: 768px)";
$screen-md: "(min-width: 992px)";
$screen-lg: "(min-width: 1200px)";

// Bootstrap breakpoints
// Usage
// @media #{$screen-xs-min} and #{$screen-xs-max} { ... }
$screen-lg-min: "(min-width: 1200px)";
$screen-md-max: "(max-width: 1199px)";
$screen-md-min: "(min-width: 992px)";
$screen-sm-max: "(max-width: 991px)";
$screen-sm-min: "(min-width: 768px)";
$screen-xs-max: "(max-width: 767px)";
$screen-xs-min: "(min-width: 480px)";
$screen-xxs-max: "(max-width: 479px)";

$breakpoints: (
    "tn": ( max-width: 383px ),
    "xxs": ( max-width: 479px ),
    "xs": ( max-width: 767px ),
    "sm": ( min-width: 768px ),
    "md": ( min-width: 992px ),
    "lg": ( min-width: 1200px )
);

// Usage
// @include breakpoint(xs) { ... }
// or
// @include breakpoint("max-width: 1199px") { ... }
@mixin breakpoint($name) {
    @if map-has-key($breakpoints, $name) {
        @media #{inspect(map-get($breakpoints, $name))} {
            @content;
        }
    }
    @else {
        @media ($name) {
            @content;
        }
    }
}