scss 设置功能mixins sass

Posted 2021-05-17

@mixin responsive($max, $width) {
  @media only screen and (unquote( $max + '-width: ' + $width)) {
    @content;
  }
}
@mixin responsive_h($max, $height) {
  @media only screen and (unquote( $max + '-height: ' + $height)) {
    @content;
  }
}

/*--CLEAN--*/

@mixin clean {
  &::after,
  &::before {
    content: "";
    display: table;
  }
  &::after {
    clear: both;
  }
}

/*--FONTS--*/

@mixin fontfaceconfig($filename, $type, $weight, $cursive) {
  $url: '../fonts/';
  $woff: $url + $filename + $type + '.woff';
  @font-face {
    font-family: $family-face;
    font-style: $cursive;
    font-weight: $weight;
    src: url($woff) format('woff');
  }
}
//---SMOOTH
@mixin smooth {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}

/*--POSITIONING--*/

$cut-width: $global-width+124px;
@mixin pos_abs($prop, $factor) {
  #{$prop}: calc( #{((100% / 2) * $factor )} - #{($global-width / 2)});
  @media screen and (max-width: $global-width + 124px) {
    #{$prop}: (((100% / 2) * $factor) - ($percent-width / 2));
  }
}

/*--PLACEHOLDERS--*/

@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }
  &:-moz-placeholder {
    /* Firefox 18- */
    @content;
  }
  &::-moz-placeholder {
    /* Firefox 19+ */
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
}

/*-- ANIMATION --*/

@mixin animation($name) {
  @at-root {
    @-webkit-keyframes #{$name} {
      @content;
    }
    @keyframes #{$name} {
      @content;
    }
  }
}

/*--RESPONSIVE FUNCTS--*/

@function pixel_rsp($pixels, $parent) {
  @return unquote( (($pixels / $parent) * 100) + '%');
}

/*--TRANSFORM--*/

@mixin transform($transform) {
  -webkit-transform: $transform;
  -ms-transform: $transform;
  -moz-transform: $transform;
  transform: $transform;
}
@mixin transform-origin($x, $y) {
  -webkit-transform-origin: $x $y;
  -ms-transform-origin: $x $y;
  -moz-transform-origin: $x $y;
  transform-origin: $x $y;
}
@mixin centerabs {
  top: 50%;
  left: 50%;
  @include transform(translate(-50%, -50%));
}

/*--FLEXS--*/

@mixin flexbox() {
  //-js-display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin align-items($value) {
  -webkit-align-items: $value;
  -moz-align-items: $value;
  -ms-align-items: $value;
  align-items: $value;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex: $values;
  -webkit-flex: $values;
  -ms-flex: $values;
  flex: $values;
}
@mixin flex-wrap($values) {
  -webkit-box-flex-wrap: $values;
  -moz-box-flex-wrap: $values;
  -webkit-flex-wrap: $values;
  -ms-flex-wrap: $values;
  flex-wrap: $values;
}
@mixin flex-basis {
  flex-basis: -webkit-fit-content;
  flex-basis: -moz-fit-content;
  flex-basis: fit-content;
}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}
@mixin justify-content($val) {
  -webkit-justify-content: $val;
  -moz-justify-content: $val;
  -ms-flex-pack: $val;
  justify-content: $val;
}
@mixin flex-direction($val) {
  -webkit-flex-direction: $val;
  -moz-flex-direction: $val;
  flex-direction: $val;
}

/*////////-- FLEXBOX CONFIGS. --///////*/

@mixin flex-row($margin) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  //---MARGIN
  margin-right: $margin;
  margin-left: $margin;
}
@mixin flex-item{
     -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; 
}

/*-- MARGENES GRALS --*/

@mixin margral {
  width: $percent-width;
  max-width: $global-width;
  margin: 0 auto;
}

/*-- BUTTONS --*/

@mixin reset-btn {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-shadow: none;
  box-shadow: none;
  border-radius: 0;
  background: none;
  cursor: pointer; //line-height: 1.25;
}
@mixin img($filename) {
  background-image: url(unquote($url-imgs + $filename));
  background-repeat: no-repeat;
  background-position: center;
}

/*-- CAST NUMBER --*/

@function to-number($value) {
  @if type-of($value)=='number' {
    @return $value;
  }
  @else if type-of($value) !='string' {
    $_: log('Value for `to-number` should be a number or a string.');
  }
  $result: 0;
  $digits: 0;
  $minus: str-slice($value,
  1,
  1)=='-';
  $numbers: ('0': 0,
  '1': 1,
  '2': 2,
  '3': 3,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  '8': 8,
  '9': 9);
  @for $i from if($minus,
  2,
  1) through str-length($value) {
    $character: str-slice($value, $i, $i);
    @if not (index(map-keys($numbers), $character) or $character=='.') {
      @return to-length(if($minus, -$result, $result),
      str-slice($value, $i))
    }
    @if $character=='.' {
      $digits: 1;
    }
    @else if $digits==0 {
      $result: $result * 10 + map-get($numbers, $character);
    }
    @else {
      $digits: $digits * 10;
      $result: $result + map-get($numbers, $character) / $digits;
    }
  }
  @return if($minus,
  -$result,
  $result);
  ;
}
///
/// Add `$unit` to `$value`
///
/// @param {Number} $value - Value to add unit to
/// @param {String} $unit - String representation of the unit
///
/// @return {Number} - `$value` expressed in `$unit`
///
@function to-length($value,
$unit) {
  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
  @if not index(map-keys($units),
  $unit) {
    $_: log('Invalid unit `#{$unit}`.');
  }
  @return $value * map-get($units,
  $unit);
}
//@debug to-number('10rem') * 2;

/*-----PIXEL TO EMS----*/

@function toEm($px) {
  //$string: ($px / 16) + unquote('rem');
  $string: ($px) + unquote('px');
  @return to-number($string);
}
@mixin centrar {
  position: absolute;
  top: 50%;
  left: 50%;
  @include transform(translate(-50%, -50%));
}
@mixin clean-centrar {
  position: relative;
  top: 0;
  left: 0;
  @include transform(translate(0, 0));
}
@mixin userselect {
  -webkit-user-select: none;
  /* Chrome, Opera, Safari */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
}
@mixin dropdown($file) {
  &:after {
    content: "";
    display: inline-block;
    width: 38px;
    height: 27px;
    background-image: url(unquote($url-imgs + $file));
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    background-size: 55px;
    margin-left: 2px;
    transform-origin: center;
    @include transform(rotate(0deg));
    transition: transform 300ms ease-in-out;
  }
}