scss Sass,Mixin Css基线网格

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss Sass,Mixin Css基线网格相关的知识,希望对你有一定的参考价值。


// ---------------------------------------------
// 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));
}

以上是关于scss Sass,Mixin Css基线网格的主要内容,如果未能解决你的问题,请参考以下文章

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

scss 网格系统列子列mixin sass

scss 一个非常简单的Baseline SCSS mixin,用于在CSS中为项目提供可视化基线。

scss CSS,SASS:em mixin

scss 用于CSS3动画的Sass Mixin

scss 用于CSS3动画的Sass Mixin