我一直在尝试学习flexbox，我在手机上乱用我的代码笔，结果发生了一些事情，我无法确定问题，但它一直给我一个错误，我一辈子都无法发现！一切似乎都很好。
代码并不惊人，我还不擅长编码，它不干燥，很乱，可读性不强，但它确实有效。即使出现错误，页面仍能正常工作。现在它什么都不做，甚至不会加载。
CSS编辑器中有一个错误，我无法修复！
请帮帮我，这真的很烦人，我已经看了好几个小时了。
这是代码笔：http://codepen.io/joecox91/pen/GrJXQX
对不起，我不记得如何将代码笔嵌入问题中！
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400');
* {
padding:0;
margin:0;
text-decoration:none;
box-sizing:border-box;
}
body, html {
padding:0;
margin:0;
width:100%;
height:100%;
}
header {
background:#ffffff;
border-bottom:1px solid #cccccc;
}
/* flex-flow: flex-direction flex-wrap */
.container {
display:-webkit-flex;
display:flex;
justify-content:center;
flex-flow: row wrap;
}
/* flex:flex-grow flex-shrink flex-basis */
.container section {
height:auto;
flex-grow:1;
padding:20px 0;
flex-shrink:1;
flex-wrap:wrap;
}
.two {
align-content:space-around;
margin:40px 20px;
font-family: 'Roboto Mono', monospace;
}
#content {
padding:20px;
width:60%;
}
#sidebar {
background:black;
width:20%;
}
// .container section:nth-child(2n) {
// background:black;
// }
#header {
display: flex;
height:100%;
align-items:center;
justify-content: center;
flex-flow:column wrap;
font-family:helvetica;
h1 {
font-size:2em;
letter-spacing:1.5px;
}
h2 {
font-size:1.2em;
}
}
#nav {
display:flex;
justify-content:center;
align-items:center;
a {
padding:20px;
color:#aaaaaa;
font-family:helvetica;
font-size:14px;
margin-right:1px;
text-transform:uppercase;
border-bottom:2px solid white;
transition:0.2s ease-out;
&.active {
border-bottom:2px solid black;
color:black;
}
&:last-child {
margin-right:0;
margin-left:20px;
border:1px solid #aaaaaa;
border-radius:5px;
&.active {
border:1px solid black;
}
}
&:hover {
color:black;
transition:0.2s ease-out;
&:last-child {
border:1px solid black;
}
}
}
}
.spin1 {
position:relative;
animation:menutate 1.5s infinite;
animation-timing-function: linear;
top:-1px;
left:10px;
width:1px;
border-top:5px solid rgba(0,0,0,0);
border-right:5px solid white;
border-left:5px solid white;
border-bottom:5px solid rgba(0,0,0,0);
background:black;
}
#mobile-menu {
display:none;
}
#mobile-header {
}
@keyframes menutate {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
#navi {
display:none;
}
@media screen and (max-width:720px) {
.container,
.two, {
flex-flow:column wrap;
}
#content {
width:100%;
}
#sidebar {
width:100%;
}
#navi {
position:absolute;
display:block;
height:100%;
top:0;
left:0;
background:deepskyblue;
width:80%;
transform:translate(-100%);
z-index:10000;
}
#navi.extend {
box-shadow:0px 0px 10px 10px rgba(0,0,0,0.4);
}
#header {
justify-content:flex-end;
align-items:flex-end;
padding-right:20px;
h1 {
padding:0;
margin:0;
}
}
#nav {
display:none;
}
.mobile-hide {
display:none;
}
body {
position:relative;
transform:translate(0);
transition:0.3s ease-out;
}
body.extend {
transform:translateX(80%);
transition:0.3s ease-out;
}
#mobile-menu {
position:fixed;
top:22px;
left:20px;
display:block;
height:50px;
overflow:none;
width:50px;
padding:8px;
z-index:500000;
transition:0.2s ease;
filter: opacity(1);
&.extend {
transform:translateX(-180%);
transition:0.4s ease;
}
&:hover {
cursor:pointer;
transition:0.5s ease;
filter:opacity(0.6);
}
span {
position:absolute;
height:4px;
background:black;
width:40px;
text-align:center;
transition:0.5s ease;
&.menu-animate {
transition:0.5s ease;
}
&:hover {
cursor:pointer;
}
&:last-child {
border:none;
font-size:12px;
background:none;
height:auto;
width:40px;
top:38px;
text-align:center;
}
&:nth-child(1) {
top:8px;
&.menu-animate {
top:13px;
transform:rotate(45deg);
}
}
&:nth-child(2) {
top:18px;
&.menu-animate {
top:13px;
transform:rotate(-45deg);
}
}
&:nth-child(3) {
top:28px;
&.menu-animate {
top:13px;
filter:opacity(0);
}
}
}
}
}
有SASS，或者一半SASS。我遇到的问题是：
Invalid CSS after "... position:fixed": expected "{", was ";"
这对我来说毫无意义！为什么它会期望在任何地方都有一个开头的花括号？位置后：固定。。。发生了什么事？
发送帮助！
谢谢
问题是在SCSS的几行上有一些奇怪的空格字符，这会绊倒Sass。如果你用合适的空间替换它们，事情似乎会起作用：
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400');
* {
padding:0;
margin:0;
text-decoration:none;
box-sizing:border-box;
}
body, html {
padding:0;
margin:0;
width:100%;
height:100%;
}
header {
background:#ffffff;
border-bottom:1px solid #cccccc;
}
/* flex-flow: flex-direction flex-wrap */
.container {
display:-webkit-flex;
display:flex;
justify-content:center;
flex-flow: row wrap;
}
/* flex:flex-grow flex-shrink flex-basis */
.container section {
height:auto;
flex-grow:1;
padding:20px 0;
flex-shrink:1;
flex-wrap:wrap;
}
.two {
align-content:space-around;
margin:40px 20px;
font-family: 'Roboto Mono', monospace;
}
#content {
padding:20px;
width:60%;
}
#sidebar {
background:black;
width:20%;
}
// .container section:nth-child(2n) {
// background:black;
// }
#header {
display: flex;
height:100%;
align-items:center;
justify-content: center;
flex-flow:column wrap;
font-family:helvetica;
h1 {
font-size:2em;
letter-spacing:1.5px;
}
h2 {
font-size:1.2em;
}
}
#nav {
display:flex;
justify-content:center;
align-items:center;
a {
padding:20px;
color:#aaaaaa;
font-family:helvetica;
font-size:14px;
margin-right:1px;
text-transform:uppercase;
border-bottom:2px solid white;
transition:0.2s ease-out;
&.active {
border-bottom:2px solid black;
color:black;
}
&:last-child {
margin-right:0;
margin-left:20px;
border:1px solid #aaaaaa;
border-radius:5px;
&.active {
border:1px solid black;
}
}
&:hover {
color:black;
transition:0.2s ease-out;
&:last-child {
border:1px solid black;
}
}
}
}
.spin1 {
position:relative;
animation:menutate 1.5s infinite;
animation-timing-function: linear;
top:-1px;
left:10px;
width:1px;
border-top:5px solid rgba(0,0,0,0);
border-right:5px solid white;
border-left:5px solid white;
border-bottom:5px solid rgba(0,0,0,0);
background:black;
}
#mobile-menu {
display:none;
}
#mobile-header {
}
@keyframes menutate {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
#navi {
display:none;
}
@media screen and (max-width:720px) {
.container,
.two, {
flex-flow:column wrap;
}
#content {
width:100%;
}
#sidebar {
width:100%;
}
#navi {
position:absolute;
display:block;
height:100%;
top:0;
left:0;
background:deepskyblue;
width:80%;
transform:translate(-100%);
z-index:10000;
}
#navi.extend {
box-shadow:0px 0px 10px 10px rgba(0,0,0,0.4);
}
#header {
justify-content:flex-end;
align-items:flex-end;
padding-right:20px;
h1 {
padding:0;
margin:0;
}
}
#nav {
display:none;
}
.mobile-hide {
display:none;
}
body {
position:relative;
transform:translate(0);
transition:0.3s ease-out;
}
body.extend {
transform:translateX(80%);
transition:0.3s ease-out;
}
#mobile-menu {
position:fixed;
top:22px;
left:20px;
display:block;
height:50px;
overflow:none;
width:50px;
padding:8px;
z-index:500000;
transition:0.2s ease;
filter: opacity(1);
&.extend {
transform:translateX(-180%);
transition:0.4s ease;
}
&:hover {
cursor:pointer;
transition:0.5s ease;
filter:opacity(0.6);
}
span {
position:absolute;
height:4px;
background:black;
width:40px;
text-align:center;
transition:0.5s ease;
&.menu-animate {
transition:0.5s ease;
}
&:hover {
cursor:pointer;
}
&:last-child {
border:none;
font-size:12px;
background:none;
height:auto;
width:40px;
top:38px;
text-align:center;
}
&:nth-child(1) {
top:8px;
&.menu-animate {
top:13px;
transform:rotate(45deg);
}
}
&:nth-child(2) {
top:18px;
&.menu-animate {
top:13px;
transform:rotate(-45deg);
}
}
&:nth-child(3) {
top:28px;
&.menu-animate {
top:13px;
filter:opacity(0);
}
}
}
}
}
这是带修复程序的Codepen。
我建议使用打开"显示不可见"的编辑器，这样你就可以很容易地看到这样的问题。