我是SASS的新手并转换了一个CSS文件,只是为了让我的新网站获得基础。我使用这个Sublime包,CSS To SASS和Stylus Convert,将CSS转换为开始:https://packagecontrol.io/packages/CSS%20To%20SASS%20And%20Stylus%20Converter
将旧CSS转换为SASS后,我修改了转换后的大部分问题。但是,我继续在最后一行代码行中得到以下错误:
Error: Invalid CSS after "...ottom: 1.3em; }": expected "}", was ""
我不确定为什么会出现这种错误,在没有解决方案的情况下查看不同的问题或其他论坛。此外,我尝试将文件类型更改为.scss,并在语法中出现不同的错误。
有人可以帮我弄清楚错误发生的原因以及纠正方法吗?
以下是我正在尝试运行的SASS。非常感谢任何帮助!
html, body
font-family: 'Source Sans Pro', Helvetica, Arial, serif
font-size: 1em
font-weight: 400
line-height: 1.45em
header ul, .mobileMenu
line-height: 6em
margin: 0
padding: 0
.white
#content
padding-top: 120px
header
background-color: #FFF
border-bottom: 1px solid #BBBDBF
#circle
fill: #6095BF
#name
display: none
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter.png')
a[href*="linkedin"]
background-image: url('../images/linkedin.png')
a[href*="pinterest"]
background-image: url('../images/pinterest.png')
#symbol
fill: #F1F1F2
a
color: #6094BE
&.active
color: #000
.mobileMenu
display: inline-block
line-height: 5.65em
position: absolute
right: 20px
h1, h2, h3, h4
font-family: "Ashbury Light"
line-height: 1.2em
margin: 1.414em 0 0.5em
footer
background-color: #6094BE
color: #FFF
padding: 25px 20px 50px 120px
padding: 25px 20px
div
display: inline-block
width: 33%
width: 36%
a
color: #FFF
#pgImg
background-color: #6094BE
color: #FFF
height: 465px
position: relative
h1
left: 120px
position: absolute
top: 250px
left: 0
nav
width: initial
border-bottom: 1px solid #BBBDBF
display: none
margin-right: 0
&.active
display: block
position: static
width: 100%
li
border-top: 1px solid #BBBDBF
display: block
line-height: 3em
text-align: center
a
margin-right: 15px
display: list-item
margin: 0
nav, .socialLinks
display: inline-block
float: right
position: relative
small
font-size: 0.75em
@font-face
font-family: 'Ashbury Light'
src: url('../fonts/2D395B_0_0.eot')
src: url('../fonts/2D395B_0_0.eot?#iefix') format('embedded-opentype'),
url('../fonts/2D395B_0_0.woff') format('woff'),
url('../fonts/2D395B_0_0.ttf') format('truetype')
font-style: normal
font-weight: normal
font-family: 'Source Sans Pro'
src: url('../fonts/SourceSansPro-Regular.eot')
src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansPro-Regular.woff') format('woff'),
url('../fonts/SourceSansPro-Regular.ttf') format('truetype'),
url('../fonts/SourceSansPro-Regular.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg')
font-style: normal
font-weight: 400
font-family: 'Source Sans Pro Bold'
src: url('../fonts/SourceSansPro-Bold.eot')
src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/SourceSansPro-Bold.woff') format('woff'),
url('../fonts/SourceSansPro-Bold.ttf') format('truetype'),
url('../fonts/SourceSansPro-Bold.svg#f59ec01e9ce984a5e7320939532a55f3') format('svg')
font-style: normal
font-weight: 700
.socialLinks
margin-right: 20px
display: none
li
a
background-position: center
background-repeat: no-repeat
height: 25px
display: inline-block
margin-left: 10px
text-indent: -9999px
vertical-align: middle
width: 30px
header a, .mobileMenu
color: #FFF
text-decoration: none
text-transform: uppercase
nav li, .socialLinks li
display: inline-block
list-style-type: none
h1, h2, h3, h4, p
padding: 0 20px
.home
display: list-item
@media screen and (max-width: 660px)
.white #content { padding-top: 91px
a
color: #6095BF
h3
font-size: 1.777em
#content
padding: 0 25px 25px 120px
padding: 0
@media screen and (min-width : 660px)
.mobileMenu, .home { display: none
h4
font-size: 1.333em
h1
font-size: 3.157em
margin-top: 10px
h2
font-size: 2.369em
header
background-color: #6094BE
position: fixed
-webkit-transition: all 1s ease-in-out
-moz-transition: all 1s ease-in-out
-o-transition: all 1s ease-in-out
transition: all 1s ease-in-out
width: 100%
z-index: 5
.logo
height: 100px
margin-left: 20px
vertical-align: middle
width: 300px
height: 90px
width: 250px
#name
path
fill: #F1F1F2
.socialLinks
li
a[href*="twitter"]
background-image: url('../images/twitter-white.png')
a[href*="linkedin"]
background-image: url('../images/linkedin-white.png')
a[href*="pinterest"]
background-image: url('../images/pinterest-white.png')
#circle
fill: #F1F1F2
#symbol
fill: #6095BF
p
margin-bottom: 1.3em