We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在variables.scss文件中定义了不同容器宽度下栅格系统的几个变量:列数($grid-columns总是12列, 列间隙宽度$grid-gutter-width和以及不同尺寸的屏幕宽度。
$screen-xs-min: 480px; //@screen-phone: @screen-xs-min; // Small screen / tablet //@screen-sm: 768px; $screen-sm-min: 768px; //@screen-tablet: @screen-sm-min; // Medium screen / desktop //@screen-md: 992px; $screen-md-min: 992px; //@screen-desktop: @screen-md-min; // Large screen / wide desktop //@screen-lg: 1200px; $screen-lg-min: 1200px; //@screen-lg-desktop: @screen-lg-min; $screen-xs-max: ($screen-sm-min - 1 ); $screen-sm-max: ($screen-sm-min - 1 ); $screen-md-max: ($screen-lg-min - 1 ); //栅格列数 $grid-columns: 12; //列间距一半为左右的padding值。 $grid-gutter-width: 30px;
@mixin container-fixed($gutter: $grid-gutter-width) { margin-right: auto; margin-left: auto; padding-left: floor(($gutter / 2)); padding-right: ceil(($gutter / 2)); @include clearfix; //&:extend(.clearfix all); }
@mixin make-row($gutter: $grid-gutter-width) { margin-left: ceil(($gutter / -2)); margin-right: floor(($gutter / -2)); box-sizing: border-box; @include clearfix; }
布局上,通过容器的负padding-left和每一个列的margin-left来实现的
@mixin make-grid($type){ .u-col-#{$type}-push-0{ left:auto; } .u-col-#{$type}-pull-0{ right:auto; } @for $i from 1 through $grid-columns { //根据列数占总列数的比例定义每列的宽度 .u-col-#{$type}-#{$i}{ width:percentage($i/$grid-columns); } //距离左侧的距离 .u-col-#{$type}-push-#{$i}{ left: percentage($i/$grid-columns); } //距离右侧的距离 .u-col-#{$type}-pull-#{$i}{ right: percentage($i/$grid-columns); } //左侧margin的距离,使用他实现列排序 .u-col-#{$type}-offset-#{$i}{ margin-left:percentage($i/$grid-columns); } } // _md 类型是为了兼容 u-col-1 这种类名 @if $type == md { .u-col-push-0{ left:auto; } .u-col-pull-0{ right:auto; } @for $i from 1 through $grid-columns { .u-col-#{$i}{ width:percentage($i/$grid-columns); } .u-col-push-#{$i}{ left: percentage($i/$grid-columns); } .u-col-pull-#{$i}{ right: percentage($i/$grid-columns); } .u-col-offset-#{$i}{ margin-left:percentage($i/$grid-columns); } } } }
其中最大的亮点就是用递归模拟了循环,通过循环避免了重复写12次代码。
固定宽度的栅格布局
.u-container { @include container-fixed(); @media (min-width: $screen-sm-min) { width: $container-sm; } @media (min-width: $screen-md-min) { width: $container-md; } @media (min-width: $screen-lg-min) { width: $container-lg; } }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
栅格变量的定义
在variables.scss文件中定义了不同容器宽度下栅格系统的几个变量:列数($grid-columns总是12列, 列间隙宽度$grid-gutter-width和以及不同尺寸的屏幕宽度。
公共mixin的定义
布局上,通过容器的负padding-left和每一个列的margin-left来实现的
其中最大的亮点就是用递归模拟了循环,通过循环避免了重复写12次代码。
具体代码
固定宽度的栅格布局
The text was updated successfully, but these errors were encountered: