scss SCSS mixins我在我的日常SCSS项目中使用。包含各种有用的mixin用于各种事物，例如，在'rem'中生成font-size

Posted 2021-05-18

// =================================================
// assets/scss/_variables.scss
// =================================================

// 
// Colors
// 

$color-prim         : #f1a948;
$color-prim-hover   : darken( $color-prim, 8% );
$color-sec          : #3eccff;
$color-sec-hover    : darken( $color-sec, 8% );
$color-danger       : #ff0033;
$color-danger-hover : darken( $color-danger, 8% );
$color-green        : #53E8A8;
$color-green-hover  : darken( $color-green, 8% );
$color-grey         : #777b85;
$color-grey-hover   : darken( $color-grey, 8% );
$color-dark         : #0f1f31;
$color-light        : #b7bcc9;
$color-lighter      : #e4e5e7;

// Colors: Text
$color-text-light : $color-grey;
$color-text-base  : #596370;
$color-text-dark  : $color-dark;

// Colors: Headlines
$color-headlines : $color-dark;

// Colors: Links
$color-link-default : $color-prim;
$color-link-hover   : $color-prim-hover;

// Colors: Navbar Links
$navbar-link-color       : #fff;
$navbar-link-color-hover : #fff;

// Colors: Backgrounds
$color-prim-bg  : $color-prim;
$color-sec-bg   : $color-sec;
$color-dark-bg  : $color-dark;
$color-light-bg : $color-light;

$color-dark-bg-text : #fff;

// Colors: Forms Background Color
$color-bg-form : #ebfaff;

// Colors: Lines
$color-line-primary : $color-prim-2;

// 
// Font Family
// 

$f-family-default    : 'Open Sans', Arial, Helvetica, sans-serif;
$f-family-sans-serif : $f-family-default;
$f-family-serif      : 'Times New Roman', Times, Serif;
$f-family-headings   : $f-family-serif;

// 
// Font Size
// 

// Font Size: Base
$f-size-root    : 10px;
$f-size-base    : 16px;
$f-size-x-large : round( $f-size-base * 1.5625 );
$f-size-large   : round( $f-size-base * 1.25 );
$f-size-small   : round( $f-size-base * 0.875 );

// Font Size: Buttons
$f-size-button       : $f-size-base;
$f-size-button-small : round($f-size-button * 0.8);
$f-size-button-large : round($f-size-button * 1.2);

// Font Size: Inputs
$f-size-input        : 16px;
$f-size-input-small  : 14px;
$f-size-input-large  : 28px;

// Font Size: Headings
$f-size-h1 : 65px;
$f-size-h2 : 40px;
$f-size-h3 : 24px;
$f-size-h4 : 20px;
$f-size-h5 : 16px;
$f-size-h6 : 14px;

// Font Size: Section Description
$f-size-sec-desc       : 26px;
$f-size-sec-desc-large : 30px;
$f-size-sec-desc-small : 22px;

// 
// Line Height
// 

// Line Height: Base
$line-height-base     : 1.9;
$line-height-headings : normal;

// 
// Fonts Weight
// 

$f-weight-thin        : 100;
$f-weight-extra-light : 200;
$f-weight-light       : 300;
$f-weight-normal      : 400;
$f-weight-medium      : 500;
$f-weight-semi-bold   : 600;
$f-weight-bold        : 700;
$f-weight-extra-bold  : 800;

// 
// Media Query Sizes
// 

$mq-extra-large : 1400px;
$mq-large       : 991px;
$mq-medium      : 767px;
$mq-small       : 480px;
$mq-extra-small : 320px;

// 
// Container Size
// 

$container-width  : 1076px;
$container-gutter : 20px;
$grid-gutter      : 15px;

// 
// Paths
// 

$path-image : 'assets/images';
$path-font  : 'assets/fonts';

// 
// Border Radius
// 

$border-radius-base  : 2px;
$border-radius-small : 1px;
$border-radius-large : 5px;

// 
// Box Shadow
// 

$box-shadow-base : 0 15px 40px rgba( #000, .15 );

// 
// Transitions
// 

$transition-extend : ' all ease-in-out';

$transition-base   : '0.25s' $transition-extend;
$transition-fast   : '0.15s' $transition-extend;
$transition-slow   : '0.35s' $transition-extend;

// ===========================================
// sass/_mixins.scss
// ===========================================
// 
// Custom SCSS Mixins.
// 
// Variables used from _variables.scss file
// copy/change the variables to reflect the
// changes in your project. 
// ===========================================

// ===========================================
// Table of Contents
// 
// 01. Spacing
// 02. Background Image
//    i. Background Image Full
//   ii. Background Image Only
// 03. All Colors
// 04. All Headings Colors
// 05. Units
//    i. Calculate REM
//   ii. Calculate EM
//  iii. Font Size
//   iv. Margin
//    v. Padding
// 06. Breakpoints
// 07. Opacity
// 08. Vertically Centered
// 09. Position
// 10. Background Position
// 11. Auto Center Vertically
// 12. Pixel to Percentage
// 13. Center with Width
// 14. Grids
// 15. Font Size Pixel to Percentage
// 16. Remove the unit of a length
// 17. Flexbox Container
// 18. Primary Gradient
// 19. Aspect Ratio
// 20. Single Button
// 21. Make Grid
//    i. Make Row
//   ii. Make Columns
// 
// ===========================================

// 01. Spacing
// ===========================================

// 
// Creates spacing classes for paddings and margins
// 
// $type      = padding, margin
// $multiple  = 1, 2, 5, 10... ; e.g. mt5, mt10, mt15...
// $end       = 10, 20, 50... ; Number of times loop runs.
// $direction = top, right, bottom, left ; set the direction
// 

@mixin spacing( $type, $multiple, $end, $direction ) {
  $class: m;

  @if $type == padding {
    $class: p;
  } @else {
    $class: m;
  }

  @for $i from 1 through $end {
    @if $direction == top {
      .#{$class}t#{$multiple * $i} {
        #{$type}-top: 1px*($multiple * $i);
      }
    } @else if $direction == bottom {
      .#{$class}b#{$multiple * $i} {
        #{$type}-bottom: 1px*($multiple * $i);
      }
    } @else if $direction == left {
      .#{$class}l#{$multiple * $i} {
        #{$type}-left: 1px*($multiple * $i);
      }
    } @else if $direction == right {
      .#{$class}r#{$multiple * $i} {
        #{$type}-left: 1px*($multiple * $i);
      }
    }
  }
}

// 02. Background Image
// ===========================================

// 
// $path-image variable should be in your _variables.scss file, e.g. 
// $path-image: '../images'
// 

@mixin bg-img-full( $path, $color: transparent, $repeat: no-repeat, $position: 0 0, $size: null ) {
  background: $color url('#{$path-image}/#{$path}') $repeat $position;
  background-size: $size;
}

@mixin bg-img-only( $path ) {
  background-image: url('#{$path-image}/#{$path}');
}

// 03. All Colors
// ===========================================

// 
// Replace all text color inside an element. 
// Useful to use on dark background to achieve light text color
// 

@mixin all-colors( $color ) {
  color: $color;

  h1, h2, h3, h4, h5, h6, a {
    color: $color;
  }
}

// 04. All Headings Colors
// ===========================================

// 
// Replace all headings color inside an element. 
// Useful to use on dark background to achieve light headings color
// 

@mixin all-headings-colors( $color ) {
  h1, h2, h3, h4, h5, h6 {
    color: $color;
  }
}

// 05. Units
// ===========================================

// 
// 05 (i). Calculate Rem
// 

@function calc-rem ( $size: (), $root: $f-size-root ) {
  $size-root: $root;
  $size_final: '';

  @for $i from 1 to length($size) + 1 {
    $n_size: nth( $size, $i ) / $size-root;
    $size_final: join($size_final, strip-unit( $n_size ) * 1rem);
  }
  @return #{$size_final};
}

// 
// 05 (ii). Margin
// 
// calculates margin in 'rem' with 'px' fallback.
// with the option to set direction, e.g., 'margin-top'
// 

@function calc-em ( $size: () ) {
  $size-root: 16px;
  $size_final: '';

  @for $i from 1 to length($size) + 1 {
    $n_size: nth( $size, $i ) / $size-root;
    $size_final: join($size_final, strip-unit( $n_size ) * 1em);
  }
  @return #{$size_final};
}

// 
// 05 (iii). Font Size
// 
// calculates font size in 'rem' with 'px' fallback.
// 

@mixin font-size( $size ) {
  font-size: $size;
  font-size: calc-rem($size);
}

// 
// 05 (iv). Margin
// 
// calculates margin in 'rem' with 'px' fallback.
// with the option to set direction, e.g., 'margin-top'
// 

@mixin margin( $size, $dir: null ) {
  @if $dir != null {
    $dir: '-' + $dir;
  }
  margin#{$dir}: $size;
  margin#{$dir}: calc-rem($size);
}

// 
// 05 (v). Padding
// 
// calculates padding in 'rem' with 'px' fallback.
// with the option to set direction, e.g., 'padding-top'
// 

@mixin padding( $size, $dir: null ) {
  @if $dir != null {
    $dir: '-' + $dir;
  }
  padding#{$dir}: $size;
  padding#{$dir}: calc-rem($size);
}

// 
// 05 (v). Size Rem
// 
// calculates size (width & height) in 'rem' 
// with 'px' fallback.
// 

@function is-size($value) {
  @return is-length($value)
          or contains("fill" "fit-content" "min-content" "max-content", $value);
}

@mixin size-rem($value) {
  $width: nth($value, 1);
  $height: $width;

  @if length($value) > 1 {
    $height: nth($value, 2);
  }

  @if is-size($height) {
    height: $height;
    height: calc-rem($height);
  } @else {
    @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
  }

  @if is-size($width) {
    width: $width;
    width: calc-rem($width);
  } @else {
    @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
  }
}

// 
// 05 (v). Width Rem
// 
// calculates width in 'rem' with 'px' fallback.
// 

@mixin width( $width: null ) {
  width: $width;
  width: calc-rem($width);
}

// 
// 05 (v). Height Rem
// 
// calculates height in 'rem' with 'px' fallback.
// 

@mixin height( $height: null ) {
  height: $height;
  height: calc-rem($height);
}

// 06. Breakpoints
// ===========================================

// Media Only 

@mixin media( $width, $upper: false ) {
  @if $upper == true {
    @media screen and (min-width: $width + 1) {
      @content;
    }
  } @else {
    @media screen and (max-width: $width) {
      @content;
    }
  }
}

// Max Width

// 
// Default following variables in your _variabls.scss file:
// $media-exlarge : 1400px;
// $mq-large   : 992px;
// $mq-medium  : 767px;
// $mq-small   : 480px;
// 

@mixin bp-x-large {
  @media screen and (max-width: $mq-extra-large) {
    @content;
  }
}

@mixin bp-large {
  @media screen and (max-width: $mq-large) {
    @content;
  }
}

@mixin bp-medium {
  @media screen and (max-width: $mq-medium) {
    @content;
  }
}

@mixin bp-small {
  @media screen and (max-width: $mq-small) {
    @content;
  }
}

@mixin bp-x-small {
  @media screen and (max-width: $mq-extra-small) {
    @content;
  }
}

// Min Width

@mixin bp-x-large-min {
  @media screen and (min-width: $mq-extra-large + 1) {
    @content;
  }
}

@mixin bp-large-min {
  @media screen and (min-width: $mq-large + 1) {
    @content;
  }
}

@mixin bp-medium-min {
  @media screen and (min-width: $mq-medium + 1) {
    @content;
  }
}

@mixin bp-small-min {
  @media screen and (min-width: $mq-small + 1) {
    @content;
  }
}

@mixin bp-x-small-min {
  @media screen and (min-width: $mq-small + 1) {
    @content;
  }
}

// 07. Opacity
// ===========================================

@mixin opacity( $opacity ) {
  $opacity-ie: $opacity * 100;
  opacity: $opacity;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// 08. Vertically Centered
// ===========================================

// 
// $height: add fixed height (must)
// $selector: add child selector to assign "vertical-align: middle;" (optional)
//            

@mixin vertical-center( $height, $selector: null ) {
  display: block;
  height: $height;

  @if $selector != null {
    #{$selector} {
      vertical-align: middle;
    }
  }

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

// 09. Position
// ===========================================

@mixin position( $position: 'absolute', $width: null, $height: null, $top: null, $right: null, $bottom: null, $left: null, $index: null ) {
  position: #{$position};
  width: $width;
  height: $height;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  z-index: $index;
}

// 10. Background Position
// ===========================================

@mixin background( $color: null, $repeat: null, $size: null, $position: null, $attachment: null ) {
  background-color: $color;
  background-repeat: #{$repeat};
  background-size: #{$size};
  background-attachment: #{$attachment};
  background-position: $position;
}

// 11. Background Opacity
// ===========================================

@mixin background-opacity( $color, $opacity: 0.85 ) {
  background-color: $color;
  background-color: rgba($color, $opacity);
}

// 12. Pixel to Percentage
// ===========================================

// 
// Depending on the container's width
// Can set $container to any value, e.g. 1000px
// And the percentage will be calculated
// based on container's value
// 

@function per-calc( $width, $container: $container-width ) {
  @return percentage($width / $container);
}

// 13. Center with Width
// ===========================================

// 
// @param $width specifies  the width you want for an element
// @param $margin-left      set either to left, right or auto, default 'auto'
// @param $margin-right     set either to left, right or auto, default 'auto'
// 

@mixin center-with-width( $width, $margin-left: auto, $margin-right: auto ) {
  max-width: $width;
  max-width: calc-rem( $width );
  margin-left: $margin-left;
  margin-right: $margin-right;
}

// 14. Grids
// ===========================================

// 
// This mixin will create a grid with the number of columns given. Columns
// numbers will be in English e.g. 'five' or 'seven' and up to 'twelve'
// 
// @param   $number     enter the number of columns you want to create.
// @param   $gutter     enter the gutter value in pixels or percentage.
// @param   $row-class  enter the class for your row, e.g. 'w-row'
// 
// Example
// 
// @include grid( 6, 10px, '.w-row' );
//

@mixin grid( $number, $gutter, $row-class ) {
  $column-number: $number + 1;
  $columns: (
    "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"
  );

  .#{$row-class} {
    @extend %clearfix;
    margin-left: -$gutter;
    margin-right: -$gutter;
    margin-bottom: $gutter;

    &-column {
      float: left;
      padding-left: $gutter;
      padding-right: $gutter;

      @for $i from 1 to $column-number {
        &-#{ nth( $columns, $i ) } {
          width: ( 100% * $i ) / $number;
        }
      }
    }
  }
}

// 15. Font Size Pixel to Percentage
// ===========================================

@function font-per-base ( $size, $base: $f-size-root ) {
  @return percentage($size / $base);
}

// 16. Remove the unit of a length
// ===========================================

@function strip-unit ( $number ) {
  @if type-of( $number ) == 'number' and not unitless( $number ) {
    @return $number / ( $number * 0 + 1 );
  }

  @return $number;
}

// 17. Flexbox Container
// ===========================================

@mixin flex-container( $hor: center, $ver: center, $bp: 'medium' ) {
  @include display( table-cell );
  @include display( flex );
  @include justify-content( $hor );
  @include align-items( $ver );

  @if $bp == 'large' {
    @include bp-large {
      @include flex-direction( column );
    }
  } @else if $bp == 'medium' {
    @include bp-medium {
      @include flex-direction( column );
    }
  } @else if $bp == 'small' {
    @include bp-small {
      @include flex-direction( column );
    }
  } @else if $bp == 'extra-small' {
    @include bp-medium {
      @include flex-direction( column );
    }
  }

  // Remove the clearfix.
  &:before, &:after {
    content: '';
    display: none;
  }
}

// 18. Primary Gradient
// ===========================================

@mixin primary-gradient() {
  background-color: mix( $color-sec, #3071ff );
  background: -moz-radial-gradient(circle at 0 100%, $color-sec, #3071ff);
  background: -webkit-radial-gradient(center, ellipse cover,  #3eccff 0%,#3071ff 100%circle at 0 100%, $color-sec, #3071ff);
  background: radial-gradient(circle at 0 100%, $color-sec, #3071ff);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3eccff', endColorstr='#3071ff',GradientType=1 );
}

// 19. Aspect Ratio
// ===========================================

@function aspect-ratio( $value ) {

  $width: nth( $value, 1 );
  $height: $width;

  @if length( $value ) > 1 {
    $height: nth( $value, 2 );
  }

  @return ( $height / $width ) * 100%;

}

// 20. Single Button
// ===========================================

@mixin single-button( $bg, $bg-hover, $text: #fff ) {
  background-color: $bg;
  color: $text;

  &:after {
    background-color: $bg-hover;
  }

  &:hover,
  &:active {
    color: $text;
    
    // Background color on touch devices
    .touchevents &  {
      background-color: $bg-hover;
    }
  }
}

// 21. Make Grid
// ===========================================

// 
// 21 (i). Make Row
// 

@mixin make-row( $gutter: $container-gutter, $clearfix: false ) {
  @if $clearfix { @extend %clearfix; }
  @include margin( -$gutter, 'left' );
  @include margin( -$gutter, 'right' );
}

// 
// 21 (i). Make Columns
// 

@mixin make-columns( $number, $gutter: $container-gutter, $bp: medium, $flex: false ) {

  // If not flex. 
  @if $flex == true {
    
  // If floats.
  } @else {
    @include padding( $gutter, 'left' );
    @include padding( $gutter, 'right' );

    // if the breakpoint is 'large', i.e., 991
    @if $bp == large {

      @include bp-large-min {
        float: left;
        width: 100% / $number;
      }

    // if the breakpoint is 'medium', i.e., 767
    } @else if $bp == medium {

      @include bp-medium-min {
        float: left;
        width: 100% / $number;
      }

    // if the breakpoint is 'small', i.e., 480
    } @else if $bp == small {

      @include bp-small-min {
        float: left;
        width: 100% / $number;
      }

    } 

  }
}