发表于： 2019-07-05 22:14:50
1 890
今天完成的事情：熟悉了sass，做了任务12，现在回过头来之前的任务挺简单，可以用好多种方法实现。新学到了文字描边属性
{-webkit-text-stroke: 1px #999;}
等后天再完善吧，
明天计划的事情：请假了
遇到的问题：sass 占位符% 生成了css 属性分开了
sass代码↓
%body {
width: 90%;
margin-left: auto;
margin-right: auto;
}
%flex {
display: flex;
align-items: center;
}
header {
@include wid-hei-bgc-col(100%, 50px, $maincolor, #fff);
@include flexd(top, 0px);
max-width: 768px;
nav {
@extend %flex, %body;
height: 50px;
position: relative;
}
}
css代码↓同样的名字生成了三段
header nav {
width: 90%;
margin-left: auto;
margin-right: auto;
}
header nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
header nav {
height: 50px;
position: relative;
}
做到最后找到了原因：占位符%的属性是共用的，所以就没有合并单个属性
header nav, table, .button-box .button, footer .button-box2 .button {
width: 90%;
margin-left: auto;
margin-right: auto;
}
header nav, .bgimg, .button-box .button, footer .button-box2 .button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
收获：函数调用真香，不过思路不清晰会容易搞乱
@mixin wid-hei-bgc-col($width, $height, $bgc, $color) {
width: $width;
height: $height;
background-color: $bgc;
color: $color;
}
header {
@include wid-hei-bgc-col(100%, 50px, $maincolor, #fff);
}
css↓
header {
width: 100%;
height: 50px;
background-color: #5fc0cd;
color: #fff;
}
返回列表
评论