发表于： 2018-11-17 21:59:50
1 749
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
使用sass对之前的代码重构。sass的嵌套对于缩减代码量比较有效，使用起来比较方便。
这边重构任务五的代码的时候，正在努力适应。
修改了之前和任务五不同的地方，比如没有加黑色透明罩
sass使用我用了其中的两个方面，一个是取变量名，另一个则是嵌套。
变量名的声明方法：
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
嵌套：
#content {
article {
h1 {
color: #333
}
p {
margin-bottom: 1.4em
}
}
aside {
background-color: #EEE
}
}
/* 编译后 */
#content article h1 {
color: #333
}
#content article p {
margin-bottom: 1.4em
}
#content aside {
background-color: #EEE
}
父选择器的标识符&;
article a {
color: blue;
&:hover {
color: red
}
}
群组选择器的嵌套;
.container {
h1, h2, h3 {margin-bottom: .8em
}
}
嵌套属性;
编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
编译前
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
然后就是重构时遇见的小问题，背景虚化的毛利片效果有白边如何去除：
一种方法是将背景图片的size放大，将白边部分撑开。
另外一种就是在blur的值比较小的情况下，
blur的值比较小，白边的效果不会那么明显。
明天计划的事情：（一定要写非常细致的内容）
完成任务12
遇到的问题：（遇到什么困难，怎么解决的）
暂无
收获：（通过今天的学习，学到了什么知识）
了解了sass的使用方法。
返回列表
评论