scss Sass，Mixin Css基线网格

Posted 2021-05-18

// ---------------------------------------------
// Baseline grid for typography and development
// ---------------------------------------------


@mixin baseline-grid($baseline: 24px, $line-color-01: #ccc, $line-color-02: transparent) {
     background: -webkit-repeating-linear-gradient(-90deg, $line-color-02, $line-color-02 $baseline, $line-color-01 ($baseline + 1));
     background:    -moz-repeating-linear-gradient(-90deg, $line-color-02, $line-color-02 $baseline, $line-color-01 ($baseline + 1));
     background:      -ms-repeating-linear-gradient(-90deg, $line-color-02, $line-color-02 $baseline, $line-color-01 ($baseline + 1));
     background:      -o-repeating-linear-gradient(-90deg, $line-color-02, $line-color-02 $baseline, $line-color-01 ($baseline + 1));
     // background:           repeating-linear-gradient(-90deg, $line-color-02, $line-color-02 $baseline, $line-color-01 ($baseline + 1));


     @include prefix-selector('background-size', 100% ($baseline + 1));
}