今日完成：

1 查找师兄的提问

1.1  如何设置水平居中

第一种情况：image

通过padding或margin设置为50%，然后通过calc减去自身的宽度，代码如下：

margin-left：calc（50%-自身宽度）

第二种情况：background-image

可以使用background-position：x,y;处理，如果要水平居中，则将x设为center，如果垂直居中，则将y设为center；

1.2  坐标原点在左上角

今日收获：

2  在查看bootstrap源码时，发现sass中有个@each的用法，于是边查资料了解

‍‍在下面的例子中你可以看到，$var就是一个变量名,<list>是一个SassScript表达式，他将返回一个列表值。变量$var会在列表中做遍历，并且遍历出与$var对应的样式块。‍‍

‍‍这有一个@each指令的简单示例：‍‍

$list: adam john wynn mason kuroir;@mixin author-images {    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {    @include author-images;
}

‍‍编译出CSS:‍‍

.author-bio .photo-adam {  background: url("/images/avatars/adam.png") no-repeat; }.author-bio .photo-john {  background: url("/images/avatars/john.png") no-repeat; }.author-bio .photo-wynn {  background: url("/images/avatars/wynn.png") no-repeat; }.author-bio .photo-mason {  background: url("/images/avatars/mason.png") no-repeat; }.author-bio .photo-kuroir {  background: url("/images/avatars/kuroir.png") no-repeat; }

参考文档：

https://www.w3cplus.com/preprocessor/Sass-control-directives-if-for-each-while.html

https://www.sasscss.com/docs/

明日计划：