scss 灰度和棕褐色滤镜SASS mixin（支持SVG滤镜）

Posted 2021-05-18

//This mixin is based on this code https://coderwall.com/p/mqk9ea
//It allows for a crossbrowser partial applying of both effects
//$toggle powers on and off the effect, $mode can be 'grayscale' or 'sepia'

@mixin grayscale( $toggle: "on", $mode:"grayscale", $amount: 1 ) {
    $svg-type: "matrix";
    $svg-value-grayscale: "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0";
    $svg-value-sepia: (0.393 + 0.607 * (1 - $amount)) + " " + (0.769 - 0.769 * (1 - $amount)) + " " + (0.189 - 0.189 * (1 - $amount)) + " 0 0 " + (0.349 - 0.349 * (1 - $amount)) + " " + (0.686 + 0.314 * (1 - $amount)) + " " + (0.168 - 0.168 * (1 - $amount)) + " 0 0 " + (0.272 - 0.272 * (1 - $amount)) + " " + (0.534 - 0.534 * (1 - $amount)) + " " + (0.131 + 0.869 * (1 - $amount)) + " 0 0 0 0 0 1 0";
    $ie-alpha: alpha(#{"opacity="}round( $amount * 100 ) );

    @if $amount != 1 and $mode == "grayscale" {
        $svg-type: "saturate";
        $svg-value-grayscale: $amount;
    }

    @if $toggle == "on" {
    	@if $mode == "grayscale" {
	        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'#{$mode}\'><feColorMatrix type=\'#{$svg-type}\' values=\'#{$svg-value-grayscale}\'/></filter></svg>##{$mode}"); // Firefox 10+, Firefox on Android
	        filter: gray $ie-alpha; // IE6-9
	        -webkit-filter: grayscale( round( $amount * 100% ) ); // Chrome 19+, Safari 6+, Safari 6+ iOS
	        filter: grayscale( round( $amount * 100% ) ); // Catch-all
        }
        @else if $mode == "sepia" {
	        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'#{$mode}\'><feColorMatrix type=\'matrix\' values=\'#{$svg-value-sepia}\'/></filter></svg>##{$mode}");
	        filter: #5E2612 $ie-alpha;
	        -webkit-filter: sepia( round( $amount * 100% ) ); // Chrome 19+, Safari 6+, Safari 6+ iOS
	        filter: sepia( round( $amount * 100% ) ); // Catch-all
        }
        @else {
        	$toggle:"off";
        }
    }

    @if $toggle == "off" {
        @if $svg-type == "saturate" {
            filter: none;
        } 
        @else {
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
        }
        -webkit-filter: grayscale(0%);
        filter: grayscale(0);
    }
}