Rudchyk
5/25/2018 - 12:43 PM

CSS gradient

//simple gradient
=g($color1, $color2)
  background-color: $color1
  background-image: linear-gradient($color1, $color2)

=gh($size, $color1, $color2)
  background-color: $color1
  background-image: linear-gradient($size, $color1, $color2)

=strongGradient($size, $beginColor, $endColor, $separator)
  background-color: $beginColor
  background-image: linear-gradient($size, $beginColor, $beginColor $separator, $endColor $separator, $endColor)

@function hexToRGB($color)
  $red: red($color)
  $green: green($color)
  $blue: blue($color)
  @return rgb+unquote('(')+($red, $green, $blue)+unquote(')')

@function hexToRGBA($color, $alpha)
  $red: red($color)
  $green: green($color)
  $blue: blue($color)
  @return rgba+unquote('(')+($red, $green, $blue, $alpha)+unquote(')')

=rgbaBg($color, $alpha)
  background-color: $color
  background-color: hexToRGBA($color, $alpha)

=bgImgBl($path)
  +image-size($path)
  background: transparent url("../"+$path) no-repeat top center
  background-size: 100% 100%

// Candystriping
=candystriping($bg:#428BCA, $deg:45, $size: 50)
  $size: lessPoint($size)
  $deg: lessPoint($deg, 1deg)
  background-color: $bg
  background-image: linear-gradient($deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) )
  background-size: $size $size

//simple gradient
@mixin g($color1, $color2) {
  background-color: $color1;
  background-image: linear-gradient($color1, $color2);
}

@mixin gh($size, $color1, $color2, $boo: null) {
  background-color: $color1;
  background-image: linear-gradient($size, $color1, $color2);
}

body {
  @include gh(260deg, #000 0%, #c16ecf 100%);
}
.gradient {
  background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
}