html 径向梯度SASS mixin

Posted 2021-05-11

@mixin linear-gradient($color-from, $color-to, $type: vertical) {
  @if $color-from and $color-to {
	
  $alpha: alpha($color-to);
  @if $alpha < 1 {
    $color-rgb: change_color($color, $alpha: 1);
    background-color: $color-rgb;
  }
  @else {
    background-color: $color-to;
  }

	$ie-from: ie-hex-str($color-from);
	$ie-to: ie-hex-str($color-to);
    
  $webkit: 'left top, left bottom';
  $spec: 'top';
  $ie: 0;
    
  @if $type == vertical {
     $webkit: 'left top, left bottom';
     $spec: 'top';
     $ie: 0;
  }
  @if $type == horizontal {
     $webkit: 'left top, right top';
     $spec: 'to right';
     $ie: 1;
  }
  @if $type == left-right {
     $webkit: 'left top, right bottom';
     $spec: '135deg';
     $ie: 1;
  }
  @if $type == right-left {
     $webkit: 'left bottom, right top';
     $spec: '45deg';
     $ie: 1;
  }
  
 
  background-image: -webkit-gradient($type, #{$webkit}, from($color-from), to($color-to));
  background-image: -webkit-linear-gradient(#{$spec}, $color-from, $color-to);
  background-image: linear-gradient(#{$spec}, $color-from, $color-to);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$ie-from}', endColorstr='#{$ie-to}', GradientType=#{$ie});

  }
}

body {
  padding: 50px 0;
}

.gradient {
  @include linear-gradient(#000000, #ffee00, vertical);
  margin: 0 auto;
  width: 250px;
  height: 250px;
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  line-height: 250px;
  font-size: 28px;
}

radial-gradient SASS mixin
--------------------------


A [Pen](http://codepen.io/jakubbelko/pen/iEauH) by [Jakub Belko](http://codepen.io/jakubbelko) on [CodePen](http://codepen.io/).

[License](http://codepen.io/jakubbelko/pen/iEauH/license).

<div class="gradient">gradient</div>