我正在使用 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;
模板.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";
该错误似乎与媒体查询有关/相关。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"是什么意思，我该如何解决？
任何建议将不胜感激。
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;
}
}