按老師方法敲的代碼為何編譯之后顯示不了而且報錯
$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;
}
}
