@charset "UTF-8";
// 1.将col限制在row中(col外围必须有row包裹，否则不生效)；
// 2.采用inline-block布局，相较于float布局灵活性更强，可通过$gridVerticalAlign设置垂直居中方式，可通过text-align实现列在row中的居中；
// 3.因为采用inline-block布局，所以父元素(row)必须设置font-size:0来去除间隙，这也是1的原因；
// 4.没有采用传统的margin产生见习，而是使用padding产生间隙，计算起来更加方便，不用考虑因为添加margin导致过长的现象；
// 5.由小屏幕往大屏幕设计的理念，所以mq采用的是min-width而不是max-width，只有在<768时使用max-width，对列采用堆叠处理
$gridColumns: 24 !default; // 总列数，默认24列
$gridGutter: 1em !default; // 默认沟槽宽度1em
$gridVerticalAlign: top !default; // 列垂直对齐方式，默认顶端对齐

// 断点
$bp_phone:47.935em !default;
$bp_pad:48em !default;
$bp_retinaPad:64em !default;
$bp_pc:80em !default;

@function getPercent($i,$container-columns:$gridColumns) { // 返回所占百分比
    $percentage: percentage($i / $container-columns);
    @return $percentage;
}

.c-Row {
    font-size: 0;
    [class*="c-Row-col"] { // 选择class中包含c-Row-col单词的元素
        padding-left: $gridGutter/2;
        padding-right: $gridGutter/2;
        @include inline-block($gridVerticalAlign);
        // .c-Row设置font-size:0,所以列使用inital设置回浏览器默认值
        font-size: initial;
        font-size: 16px\9;
        // 由于在c-Row上可能应用u-textC来居中列，所以在列中将text-align置回正常值
        text-align: left;
        position: relative;
        // 移除首个和最后个的padding
        @at-root #{&}:first-of-type{
            padding-left:0;
        }
        @at-root #{&}:last-of-type{
            padding-right:0;
        }
    }
    @at-root #{&}--vAlign{
        [class*="c-Row-col"]{
            vertical-align: middle;
        }
    }
    // 所有屏幕尺寸都会应用这个样式
    @for $i from 1 through $gridColumns {
        .c-Row-col#{$i} {
            width: getPercent($i, $gridColumns);
        }
        @if $i <$gridColumns {
            .c-Row-colOffset#{$i} {
                margin-left: getPercent($i, $gridColumns);
            }
        }
    }

    //<768 (<=767视为Phone)，除列为col-6、col-8、col-12、col-24外都采取堆叠
    @include mq($max-width: $bp_phone) {
        [class*="c-Row-col"]:not([class~="c-Row-col6"],[class~="c-Row-col8"],[class~="c-Row-col12"],[class~="c-Row-col24"]) {
            width: 100%;
        }
    }

    // sm >=768 (>=768 && <1024视为Pad)
    @include mq($min-width:$bp_pad) {
        @for $i from 1 through $gridColumns {
            .c-Row-col#{$i}--sm {
                width: getPercent($i, $gridColumns);
            }
            @if $i <$gridColumns {
                .c-Row-colOffset#{$i}--sm {
                    margin-left: getPercent($i, $gridColumns);
                }
            }
        }
    }

    // md >=1024 (>=1024 && <1280视为retina Pad)
    @include mq($min-width: $bp_retinaPad) {
        @for $i from 1 through $gridColumns {
            .c-Row-col#{$i}--md {
                width: getPercent($i, $gridColumns);
            }
            @if $i <$gridColumns {
                .c-Row-colOffset#{$i}--md {
                    margin-left: getPercent($i, $gridColumns);
                }
            }
        }
    }

    // lg >=1280 (>=1280视为PC)
    @include mq($min-width:$bp_pc) {
        @for $i from 1 through $gridColumns {
            .c-Row-col#{$i}--lg {
                width: getPercent($i, $gridColumns);
            }
            @if $i <$gridColumns {
                .c-Row-colOffset#{$i}--lg {
                    margin-left: getPercent($i, $gridColumns);
                }
            }
        }
    }
}