My mixins

mixins.styl

remify(value) {
  u = unit(value);
  if (u is 'px') {
    return unit(value/16, 'rem');
  } else {
    return unit(value, u);
  }
}


// SPRITES
// icon
@mixin sprite($path, $size, $y: 0, $x: 0) {
  width: $size;
  height: $size;
  background-size: $size;
  background-repeat: no-repeat;
  background-position: -($x*$size) -($y*$size);
  background-image: url($path);
}

// MEDIA QUERIES
@mixin mobile {
  @media screen and (max-device-width: 480px) {
    @content;
  }
}

@mixin desktop {
  @media screen and (min-width: 1024px){
    @content;
  }
}

@mixin mediaqueries($maxWidth) {
  @media screen and (max-width: $maxWidth){
    @content;
  }
}
// WEB FONT
// fontPath = "../assets/fonts/";
// webfont("Avenir", fontPath + "Avenir/AvenirLTStd-Roman", 300, normal, otf)
// https://codepen.io/EmmanuelBeziat/pen/yYoadw?editors=0100
webfont(family, fileUrl, font-weight = false, font-style = false, formats = eot woff2 woff truetype svg)
	@font-face
		fonts = ()
		font-family family
		if eot in formats
			push(fonts, 'url("' + fileUrl + '.eot?iefix") format("emebedded-opentype")')
		if woff2 in formats
			push(fonts, 'url("' + fileUrl + '.woff2") format("woff2")')
		if woff in formats
			push(fonts, 'url("' + fileUrl + '.woff") format("woff")')
		if opentype in formats || otf in formats
			push(fonts, 'url("' + fileUrl + '.otf") format("opentype")')
		if truetype in formats || ttf in formats
			push(fonts, 'url("' + fileUrl + '.ttf") format("truetype")')
		if svg in formats
			push(fonts, 'url("' + fileUrl + '.svg#' + family + '") format("svg")')
		src unquote(join(", ", fonts))
		if font-weight
			font-weight font-weight
		if font-style
			font-style font-style


@mixin backgroundImage(_url) {
  background-image: url(_url);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

hoverDarkenBackgroundColor(_color, percent = 20%) {
  background-color: _color;
  &:hover {
    background-color: darken(_color, percent);
  }
}

hoverToggleColor(_color1, _color2) {
  background-color: _color1;
  color: _color2;

  &:hover {
    background-color: _color2;
    color: _color1;
  }
}

customScrollbar(color) {
  &::-webkit-scrollbar {
    width: _margin * 0.5;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #181818;
  }
}
// CENTER
center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
centerX() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
centerY() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

// CONTAINER
container() {
  width: 90%;
  max-width: 1024px;
  margin: auto;
}

// OVERLAY
overlay() {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: overlayColor;
  transition: 0.2s;
    &:hover {
      opacity: 1;
    }
}

// CIRCLE
circle(d) {
  width: d;
  height: d;
  border-radius: d;
}

deco() {
  pointer-events: none;
  user-select: none;

  &:hover {
    cursor: default;
  }
}

remify(value) {
  u = unit(value);
  if (u is 'px') {
    return unit(value/16, 'rem');
  } else {
    return unit(value, u);
  }
}