scss 基于行高的基线网格SASS mixin，支持rem和px。显示在页面内容上方。按W切换

Posted 2021-05-18

body {@include baseline-grid($base-line-height);}

//assumes jQuery
$(document).ready(function() {

	$('body').append('<div class="baselinegrided"></div>');
    $('.baselinegrided').height($(document).height());
    $(document).on('keypress', function(e) {
	    var code = e.keyCode || e.which;
	    if(code === 119) {
		    $('.baselinegrided').toggle();
	    }
  });
});

@function strip-units($number) {
	@return $number / ($number * 0 + 1);
}

// Mixins

//requires strip-units function
@mixin baseline-grid($baseline, $line-color-01: #ccc, $line-color-02: transparent) {
	$browser-fz-base:16;

	@if (unit($baseline) == 'rem') {
		$baseline:$baseline*$browser-fz-base;
	}
	$baseline:strip-units($baseline);
	.baselinegrided {
		width:100%; height:100%; position:absolute; top:0; left:0; z-index:10000; display:none; pointer-events:none;
		background: -webkit-repeating-linear-gradient(180deg, $line-color-02, $line-color-02 $baseline - 1px, $line-color-01 $baseline + px);
		background: -moz-repeating-linear-gradient(180deg, $line-color-02, $line-color-02 $baseline - 1px, $line-color-01 ($baseline + px));
		background: -ms-repeating-linear-gradient(180deg, $line-color-02, $line-color-02 $baseline - 1px, $line-color-01 ($baseline + px));
		background: repeating-linear-gradient(180deg, $line-color-02, $line-color-02 $baseline - 1px, $line-color-01 ($baseline + px));
		background-size:100% ($baseline + px);
	}
}