scss 用于项目Mixin零件的SASS样板

Posted 2021-05-18

// Function to get BASEUNIT related values
// ===================================================================================

@function baseUnit($s: 1) {
  @return round($MAIN-UNIT * $s);
}

// Absolute positioning
// instead of using {position:absolute; top:0; right: 1px; bottom: 2px; left: 3px;}
// use @include pos(0, 1px, 2px, false); -> pos:a+t:0+r:1px+b:2px - false - ignore
// ===================================================================================

@mixin pos($pos: 0) {
  $l: length($pos);
  $top: false;
  $right: false;
  $bottom: false;
  $left: false;
  @if $l==1 {
    $top: nth($pos, 1);
    $right: nth($pos, 1);
    $bottom: nth($pos, 1);
    $left: nth($pos, 1);
  }
  @else if $l==2 {
    $top: nth($pos, 1);
    $right: nth($pos, 2);
    $bottom: nth($pos, 1);
    $left: nth($pos, 2);
  }
  @else if $l==3 {
    $top: nth($pos, 1);
    $right: nth($pos, 2);
    $bottom: nth($pos, 3);
  }
  @else {
    $top: nth($pos, 1);
    $right: nth($pos, 2);
    $bottom: nth($pos, 3);
    $left: nth($pos, 4);
  }
  position: absolute;
  @if $top !=false {
    top: $top;
  }
  @if $right !=false {
    right: $right;
  }
  @if $bottom !=false {
    bottom: $bottom;
  }
  @if $left !=false {
    left: $left;
  }
}

// Placeholder styles
// ===================================================================================

@mixin placeholder {
  &::-moz-placeholder {
    opacity: 1;
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
}

// Media responce calls
// Usage
// @include media(980px) { styles } -> max-width 980;
// @include media(980px, true) { styles } -> min-width: 980;
// @include media(480, 980) { styles } -> max 480 min 980
// ===================================================================================

@mixin media($s, $m: true) {
  @if $m==true {
    @media only screen and (min-width: convert-length($s, em)) {
      @content;
    }
  }
  @else if $m==false {
    @media only screen and (max-width: convert-length($s, em)) {
      @content;
    }
  }
  @else {
    @media only screen and (min-width: convert-length($m, em)) and (max-width: convert-length($s, em)) {
      @content;
    }
  }
}

// Hide all text in element
// ===================================================================================

@mixin hide-text($h: true) {
  @if $h {
    font: #{0/0} a;
    text-decoration: none;
    text-shadow: none;
    color: transparent;
  }
  @else {
    font-size: 0;
    line-height: 0;
  }
}

// Ellipsis turncrate
// ===================================================================================

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}