我正在使用Incident57的CodeKit预处理器来编译一系列较少的文件,这些文件正被导入并缩小为一个名为template.css的CSS文件。
然而,经过一些编辑(我不知道是什么编辑导致了这个)我开始得到non_object_property_callError
non_object_property_callError: Cannot call method 'charAt' of null in /Volumes/Clients/htdocs/ergonomiq/domains/clients/polaris5/less/mediaqueries.less:14:2
13 h1 {
14 font-size: 100px;
15 margin-bottom: 60px;
template.less导入12个文件:
@import "cssindex.less";
@import "fonts.less";
@import "colors.less";
@import "variables.less";
@import "mixins.less";
@import "base.less";
@import "skeleton.less";
@import "flexslider.less";
@import "prettyPhoto.less";
@import "layout.less";
@import "scrollbars.less";
@import "mediaqueries.less";
此外,fonts.less本身导入5个文件
@import "font-awesome.less";
@import "font-awesome-ie7.less";
@import "font.bebas.less";
@import "font.leaguegothic.less";
@import "font.sourcesanspro.less";
该错误似乎与媒体query.less文件
有关/相关/* Media Queries CSS File
================================================== */
/* Smaller than 1024 (devices and browsers) */
@media only screen and (max-width: 1024px) {
.title {
position: relative;
padding-top: 110px;
}
#intro {
height: 600px;
}
h1 {
font-size: 100px;
margin-bottom: 60px;
&.small {
font-size: 60px;
margin-bottom: 20px;
}
}
}
/* Smaller than 960 (devices and browsers) */
@media only screen and (max-width: 960px) {
nav {
ul {
display: none;
}
}
.title {
position: relative;
padding-top: 50px;
}
.mobnav {
position: absolute;
z-index: 9999;
top: 0.1em;
right: 0.1em;
width: 100px;
height: 49px;
}
.mobico {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: @black;
color: @white;
z-index: 9990;
overflow: hidden;
a {
display: block;
width: 100%;
text-align: center;
padding: 20px 0;
font-family: @baseFontFamily
font-size: 1.5em;
color: @gray85;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
border-bottom: solid 1px @gray50;
}
}
.menusel {
position: absolute;
z-index: 9999;
top: 0.7em;
right: 0.1em;
width: 40px;
height: 49px;
}
nav.is-sticky .mobnav, .mobnav {
display: inline;
}
#about {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
nav, nav.is-sticky {
display: block;
position: fixed;
top: 0;
left: 0;
height: 52px;
}
.title {
padding-top: 55px;
}
.logo1, .menusel, .mobnav, nav .mobnav {
display: inline;
z-index: 9999;
position: fixed;
}
#intro {
margin-top: 55px !important;
}
.logo {
display: none;
}
#about {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.logo {
display: none;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
#separator1, #separator2, #separator3 {
width: 100%;
height: 300px;
}
h1 {
font-size: 70px;
margin-bottom: 20px;
&.small {
font-size: 40px;
margin-bottom: 20px;
}
}
.title {
p {
font-size: 20px;
line-height: 28px;
}
}
nav {
ul {
li {
padding-left: 10px;
padding-right: 10px;
}
}
}
nav, nav.is-sticky {
display: block;
position: fixed;
top: 0;
left: 0;
height: 52px;
}
.mobnav, .menusel {
display: inline;
z-index: 9999;
position: absolute;
top: 0.7em;
right: 0.1em;
height: 49px;
}
.logo1, .menusel, .mobnav, nav .mobnav {
display: inline;
z-index: 9999;
position: fixed;
}
.intro-line {
width: 400px;
}
h2 {
font-size: 3.5em;
margin-top: 1em;
margin-bottom: 1em;
}
#about {
p {
margin-top: 1em;
margin-bottom: 1em;
word-spacing: 0.4em;
}
}
.serv-list, .markets-list {
margin-top: 3em;
h4 {
margin-bottom: 2em;
line-height: 1.15em;
}
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
#separator1, #separator2, #separator3 {
width: 100%;
height: 300px;
}
#intro {
height: 430px;
}
.title {
position: relative;
padding-top: 120px;
p {
font-size: 18px;
line-height: 28px;
}
}
.intro-line {
display: none;
}
h1 {
font-size: 60px;
margin-bottom: 20px;
&.small {
font-size: 30px;
margin-bottom: 20px;
}
}
h2 {
font-size: 3em;
margin-top: .5em;
margin-bottom: .5em;
}
nav {
ul {
li {
padding-left: 5px;
padding-right: 5px;
}
}
}
#about {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#about, #contact, #markets {
p {
font-size: 1.25em;
margin-top: .5em;
margin-bottom: .5em;
word-spacing: 0.4em;
}
.copyright {
p {
font-size: .85em;
}
}
}
nav, nav.is-sticky {
display: block;
position: fixed;
top: 0;
left: 0;
height: 52px;
}
.logo {
display: none;
}
.logo1, .menusel, .mobnav, nav .mobnav {
display: inline;
z-index: 9999;
position: fixed;
}
.serv-list, .markets-list {
margin-top: 3em;
h4 {
font-size: 2em;
margin-bottom: 2em;
line-height: 1.15em;
}
.roundness-red, .roundness-blue {
padding: 1em 0;
span, i {
font-size: 2em;
padding: 1.2em 1.3em;
}
}
.roundness-purple, .roundness-yellow, .roundness-green {
padding: 1em 0;
span, i {
font-size: 2em;
padding: 1.2em 1.2em 1.1em 1.2em;
}
}
p {
font-size: 1.25em;
margin-top: 2em;
margin-bottom: .5em;
}
}
.contact-info {
font-size: 1em;
margin-top: 1em;
}
}
除此之外,我完全迷失了。
non_object_property_callError:无法调用方法'charAt'为null 错误意味着什么,我该怎么解决?
任何建议都将受到赞赏。
答案 0 :(得分:4)
关于LESS最令人沮丧的是它的调试信息不太有用。
第57行是一个简单的缺失分号
a {
display: block;
width: 100%;
text-align: center;
padding: 20px 0;
font-family: @baseFontFamily //missing semicolon
font-size: 1.5em;
color: @gray85;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
border-bottom: solid 1px @gray50;
}
}
更正的代码工作正常
a {
display: block;
width: 100%;
text-align: center;
padding: 20px 0;
font-family: @baseFontFamily;
font-size: 1.5em;
color: @gray85;
font-weight: 300;
text-decoration: none;
text-transform: uppercase;
border-bottom: solid 1px @gray50;
}
}