今天完成的事情：
使用sass完成了任务11的界面样式
学习了sass更多内容
编译sass
//单文件监听命令
sass --watch input（需要编译的文件文件夹）.scss:output（输出的文件文件夹）.css
关于嵌套在父元素的hover样式
下面这种情况sass就无法正常工作：
article a {
color: blue;
:hover { color: red }
}
这意味着color: red这条规则将会被应用到选择器article a :hover，article元素内链接的
所有子元素在被hover时都会变成红色。这是不正确的，你想把这条规则应用到超链接自身，
而后代选择器的方式无法帮你实现
解决之道为使用一个特殊的sass选择器，即父选择器。在使用嵌套规则时，父选择器能对于
嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器
可出现的地方，比如h1放在哪，它就可以放在哪。
article a {
color: blue;
&:hover { color: red }
}
/* 编译后 */
article a { color: blue }
article a:hover { color: red }
任务11
scss代码
$header-background:#1aa0e8;
$header-color:#fff;
$body-background:#f0f4f7;
$span-color:#666;
*{
margin: 0;
padding: 0;
}
body{
background: $body-background;
}
header{
display: flex;
align-items: center;
width: 100%;
height: 60px;
margin-bottom: 15px;
background: $header-background;
.imagef{
height: 30px;
margin: 0 40px 0 10px;
}
span{
font-size: 18px;
color:$header-color;
}
}
.loginbar{
display: flex;
align-items: center;
width: 100%;
height: 55px;
margin-top: 1px;
background: $header-color;
img{
height: 25px;
padding: 0 20px;
border-right: 1px solid $body-background;
}
input{
width: 70%;
height: 100%;
margin-left: 25px;
border: 0;
font-size: 16px;
outline:none;
}
input::-webkit-input-placeholder{
font-size: 14px;
}
}
.but{
display: flex;
justify-content: center;
button{
width: 90%;
height: 50px;
margin-top: 20px;
border: 0;
border-radius: 7px;
background: $header-background;
font-size: 17px;
color:$header-color;
}
}
.joinus{
display: flex;
justify-content: space-between;
margin: 5px 5%;
span{
font-size: 14px;
color:$span-color;
&:hover{
color:$header-background
}
}
}
footer{
display: flex;
align-items: flex-end;
justify-content: center;
height: 200px;
color:$span-color;
font-size: 14px;
div{
width: 40%;
height: 20px;
margin-bottom: 8px;
border-bottom:1px solid #bfc1c3 ;
}
span{
min-width: 100px;
}
}
login{
display: flex;
justify-content: center;
margin-top: 15px;
.circle{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
margin: 10px 6vw;
background: #67d255;
border-radius: 50%;
&:hover{
background-color: #91dc85;
}
}
.circle1{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
margin: 10px 6vw;
background: #1fa0ef;
border-radius: 50%;
&:hover{
background-color: #65b6e8;
}
}
.circle2{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
margin: 10px 6vw;
background: #f34757;
border-radius: 50%;
&:hover{
background-color: #e5636f;
}
}
img{
height: 20px;
}
div{
font-size: 12px;
text-align: center;
}
}
返回列表
评论