发表于: 2018-09-12 00:03:59
1 746
今天完成的事情:
1.完成任务13,页面1/2sass的改写。
明天计划的事情:
1.编写任务13页面3sass的改写。
遇到的问题:
1.在使用传参@mixin button ($top,$left,$right,$width,$height)的时候,设置了5个变量,但在实际调用使用的时候,第一个调用的时候需要left变量(right不使用),第二个调用的时候需要right变量(left不使用),调用传送参数值又是一 一对应的,这就出现问题了,开始把不使用的那个变量设置为0,结果有问题,不是想要的效果。后来混合传参的用法,调用时变量确实需要一一对应,这样只能把mixin中left、right变量去掉,在调用完之后再单独写left、right的数值。
@mixin button ($top,$width,$height){
background-size: cover;
position: absolute;
top: $top;
width: $width;
height: $height;
outline: none;
border: none;
}
@include button(14.3rem,1.8rem,3rem);
right:7%;
收获:
- 不要使用没有设置参数的
@mixin
,他们应该是.class
或者%placeholders
; - 不要轻意(从不使用)
@extend
调用.class
。会得到你意想不到的结果,特别是定义的.class
出现在嵌套或其他的样式表中,你应该使用@extend
调用%placeholders
; - 不要使用太深的选择器嵌套。
评论