3分钟13行代码搭建sass版移动端网格系统_html/css_WEB-ITnose

企鹅博客 2019年8月14日17:47:44 评论 358
摘要

3分钟13行代码搭建sass版移动端网格系统

一般来说,网格系统分为container、row及column三大部分,而container一般是负责内容居中的,这对pc端比较合适,而大移动端是真的不太需要,所以直接砍掉,那么就剩下row和column了。

上代码:

@mixin row() {    width: 100%;    display: flex;}@mixin col($num, $total: 1) {    // 如果$total为默认的1,则表示等分的$num分之一    // 否则计算$num/$total    @if $total == 1 {        width: 100% / $num;    } @else {        width: percentage($num / $total);    }}

如何使用:

.row{    @include row;}// col的命名规范为col-占的格子数-总的格子数.col-1-2{    @include col(2);}.col-1-3{    @include col(1, 3);}.col-2-3{    @include col(2, 3);}.col-1-4{    @include col(4);}.col-3-4{    @include col(3, 4);}.col-2-5{    @include col(2,5);}

最后,扩展成一个百搭可控制的网格系统:

@charset "UTF-8";//-----------------------------------------------------// grid system//-----------------------------------------------------$gridFlex: false !default;$gridRowClearfix: false !default; // 如果采用float,子元素清除浮动使用clearfix或overflow$gridClass: false !default;// row@mixin row() {    width: 100%;    @if $gridFlex {        display: flex;    } @else if $gridRowClearfix{        @extend %clearfix;    } @else {        overflow: hidden;    }}// col@mixin col($num, $total: 1) {    @if not $gridFlex {        float: left;    }    // 如果$total为默认的1,则表示等分的$num分之一    // 否则计算$num/$total    @if $total == 1 {        width: 100% / $num;     } @else {        width: percentage($num / $total);    }}// 是否开启class@if $gridClass {    .row{        @include row;    }    .col-1-2{        @include col(2);    }    .col-1-3{        @include col(1, 3);    }    .col-2-3{        @include col(2, 3);    }    .col-1-4{        @include col(4);    }    .col-3-4{        @include col(3, 4);    }    .col-1-5{        @include col(5);    }    .col-2-5{        @include col(2, 5);    }    .col-3-5{        @include col(3, 5);    }    .col-4-5{        @include col(4, 5);    }}
weinxin
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
企鹅博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: