按老师方法敲的代码为何编译之后显示不了而且报错
$toolbar-size:5px;
.toolbar{
position:fixed;
left:50%;
bottom:5px;
margin-left:-$toolbar-size / 2;}
.toolbar-item{
position: relative;
display: block;
width: $toolbar-size;
height: $toolbar-size;
margin-top: 1px;
&:hover{
.toolbar-btn{
&:before{
top:-$toolbar-size;
}
&:after{
top:0;
}
}
&:after{
@include opacity(1);
@include scale(1);
}
}
&:after{
content: "";
position: absolute;
right: $toolbar-size - 6;
bottom: -10px;
width: 172px;
background-image: url(../img/toolbar_img.png);
background-repeat: no-repeat
@include opacity(0);//透明度
@include transform-origin(95% 95%);//缩放基准点
@include scale(0.01); //缩放到原来大小的0.01倍
@include transition(all 1s);//过度时间是一秒
}
}
.toolbar-item-weixin{
&:after{
content:"";
height:212px;
background-position:0 0;
}
.tool-btn{
&:before{
content:"\e601";
}
&:after{
content:"公众\A账号";
}
}
}
.toolbar-item-feedback{
.tool-btn{
&:before{
content:"\e603";
}
&:after{
content:"意见\A反馈";
}
}
}
.toolbar-item-app{
&:after{
content:"";
height:194px;
background-position:0 -222px;
}
.tool-btn{
&:before{
content:"\e958";
}
&:after{
content:"APP\A下载";
}
}
}
.toolbar-item-top{
.tool-btn{
&:before{
content:"\e600";
}
&:after{
content:"返回\A顶部";
}
}
}
.toolbar-btn{
position:absolute;
left:0;
top:0;
width:$toolbar-size;
height:$toolbar-size;
overflow:hidden;//艺术隐藏
font-family:"icomoon";
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
line-height:1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&：before{//icon
content:"";
position:absolute;
left:0;
top:0;
width:$toolbar-size;
height:$toolbar-size;
background-color:#d0d6d9;
font-size:30px;
color:#fff;
text-align:center;
line-height:$toolbar-size;
@include transition(top 1s);
}
&：after{//text
content:"";
position:absolute;
left:0;
top:$toolbar-size;
width:$toolbar-size;
height:$toolbar-size;
background-color:#98a1a6;
font-size:12px;
color:#fff;
text-align:center;
line-height:1.2em;
padding-top:12px;
@include transition(top 1s);
white-space:pre;
}
}
