今天完成的事情：
完成了栅格系统，使用了@for和@each。
使用@each遍历$grid-prefix-list列表，并返回3个值，$grid-prefix插入到类名中，$son-width插入到媒体查询中，$con-width插入到.container的为width的值，
同时使用@for循环1-12，得到的$i同时插入到.col#{$grid-prefix}-#{$i}类命中和width的值中，这里做了一个运算，width: (100 / 12) * $i + %; 100/12得到一格的宽度，然后随着for循环，得到$i的值为1-12，两者相乘得到总宽度，使用+字符串运算给值加上%单位。
$grid-prefix-list: (-sm 576px 540px) (-md 768px 720px) (-lg 992px 960px) (-xl 1200px 1140px);
@each $grid-prefix,$son-width,$con-width in $grid-prefix-list {
@media only screen and (min-width: $son-width) {
.container {
width: $con-width
}
@for $i from 1 through 12 {
.col#{$grid-prefix}-#{$i} {
width: (100 / 12) * $i + %;
}
}
}
}
下面是运行得到的结果：
@media only screen and (min-width: 576px) {
.container {
width: 540px;
}
.col-sm-1 {
width: 8.33333%;
}
.col-sm-2 {
width: 16.66667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333%;
}
.col-sm-5 {
width: 41.66667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333%;
}
.col-sm-8 {
width: 66.66667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333%;
}
.col-sm-11 {
width: 91.66667%;
}
.col-sm-12 {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
.container {
width: 720px;
}
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}
}
@media only screen and (min-width: 992px) {
.container {
width: 960px;
}
.col-lg-1 {
width: 8.33333%;
}
.col-lg-2 {
width: 16.66667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333%;
}
.col-lg-5 {
width: 41.66667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333%;
}
.col-lg-8 {
width: 66.66667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333%;
}
.col-lg-11 {
width: 91.66667%;
}
.col-lg-12 {
width: 100%;
}
}
@media only screen and (min-width: 1200px) {
.container {
width: 1140px;
}
.col-xl-1 {
width: 8.33333%;
}
.col-xl-2 {
width: 16.66667%;
}
.col-xl-3 {
width: 25%;
}
.col-xl-4 {
width: 33.33333%;
}
.col-xl-5 {
width: 41.66667%;
}
.col-xl-6 {
width: 50%;
}
.col-xl-7 {
width: 58.33333%;
}
.col-xl-8 {
width: 66.66667%;
}
.col-xl-9 {
width: 75%;
}
.col-xl-10 {
width: 83.33333%;
}
.col-xl-11 {
width: 91.66667%;
}
.col-xl-12 {
width: 100%;
}
}
@each每遍历一个列表值，@for会循环一次1-12。
这里面的核心是$grid-prefix-list这个变量，这个变量对应了多个值，而且是有组织的，相当于数组里面还有数组，sass的列表值大致有三种形式分隔，分别为空格，逗号和小括号。空格比较常见，这里的$grid-prefix-list使用了两种分隔，分别为空格和小括号，@each循环先得到用小括号分隔的，然后在@each里面通过
$grid-prefix,$son-width,$con-width三个变量取得小括号里面用空格分开的列表值。
明天计划的事情：
完成任务14的导航栏和轮播图。
遇到的困难：
暂无
收获：
学会了SASS列表值的使用，并用@each遍历整个列表，同时搭配for循环使用。
返回列表
评论