发表于: 2017-04-08 23:47:24
1 630
今天完成:
继续任务13,
1.拆分头部组件,在sass文件中引入局部文件而不生成多余的css文件需要在局部文件名字前加“_”下划线。
然后在sass文件中使用@import引入,就可以在对应的css文件中生成代码了。这样拆分组件后就可以在不同的文件中重复使用,达到了复用的目的。
@import "header";//引入头部组件
2.使用混入传参可以对相同的类采取不同样式。先设定好混入的属性,为传参制定规则,
@mixin font($color,$size){//设置字体参数
color: $color;
font-size: $size;
}
在需要的地方使用@include引入参数,
p{
@include font(#fff,1.5rem);
margin:0 0 0 3rem;
这样可以使用一个混入指令对不同样式字体进行控制。
明天计划:
学习在sass中使用媒体查询的技巧。拆分底部组件,对任务13的页面调整,完成任务13.
遇到困难:
1.对于在sass中设置的变量怎么用媒体查询控制,今天尝试了直接在sass中设置没有作用,可能是对于变量的设置错误,明天学习下。
2.对于min-width的使用,由于页面使用了几个小图标,想要实现图标的自适应,使用max和min对宽度进行控制,min总是不起作用,不知道为什么,当页面尺寸变小图标会很不协调
收获: 学会使用mixin混入传参,学会如何拆分可用的组件。
评论