发表于: 2017-04-08 23:48:55

1 629


今天做了什么: 做完了任务12和任务13


明天要做什么: 任务十四和任务十五


今天遇到的问题:


1.关于sass的混合宏:今天get到了一个新的点,可以把上一个混合宏的结果用在下一个混合宏里,例如

@mixin box ($height,$size,$color,$bgc) {
 @include flex (center);
 height: $height;
 font-size: $size;
 text-align: center;
 color: $color;
 background-color: $bgc;
}

2.关于在sass里面使用媒体查询


一开始我是想直接用css的媒体查询,但是会失效,一开始我在想是不是我使用媒体查询的class被我放在混合宏里面,查不到。我就将此属性把class从混合宏里面拿出来,但是还是查不到。后来师兄@李维文指出是因为没有把媒体查询放在他的上一级class里,在sass编译的时候就不会添加上级class,导致找不到这个class。可能我说的比较混乱=。=


然后无良师兄@李维文(>.<)让我用sass的媒体查询写(╯‵□′)╯︵┻━┻,查了一波,(。・∀・)ノ゙嗨呀好难啊,抄了代码,但是师兄毕竟还是师兄,就给我解释了一下这个是怎么用的:


首先设置一个变量作为断点


$breakpoints: ('xs''only screen and ( max-width: 480px)'!default;

然后在混合宏里面写


@mixin respond-to ($breakpoint) {
  $query: map-get($breakpoints$breakpoint);

  @if not $query {
    @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
  }

  @media #{if(type-of($query== 'string', unquote($query), inspect($query)){
    @content;
  }
}

查询断点,如果没有查到,就报错;查到了,就在这个类里面添加属性值。然后用@include吧之前的值覆盖掉,实现媒体查询。


今天的感悟:跟一个gay里gay气的人打赌,我要在两天之内做完14和15,赢饭的,我浑身300多斤的肉都兴奋起来了!



返回列表 返回列表
评论

    分享到