本文介绍了LESS编译错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Incident57的CodeKit预处理器编译一系列较少的文件，将被导入和缩小到一个单一的CSS文件称为template.css。
但是，在做了一些编辑（我不知道是什么编辑引起的）我已经开始得到non_object_property_callError
non_object_property_callError：方法'charAt'的null在/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个文件：
@importcssindex.less;
@importfonts.less;
@importcolors.less;
@importvariables.less;
@importmixins.less;
@importbase.less;
@importskeleton.less;
@importflexslider.less;
@importprettyPhoto.less;
@importlayout.less;
@importscrollbars.less;
@importmediaqueries.less;
此外，fonts.less本身导入5个文件
@importfont-awesome.less;
@importfont-awesome-ie7.less;
@importfont.bebas.less;
@importfont.leaguegothic.less;
@importfont.sourcesanspro.less;
错误似乎与media /无关的文件相关联
/ *媒体查询CSS文件
======================= =========================== * /
/ *小于1024（设备和浏览器）* /
@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;
}
}
}
/ *小于960（设备和浏览器）* /
@media只有屏幕和（最大宽度：960像素）{
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;
}
}
/ *平板电脑肖像大小到标准960（设备和浏览器）* /
@media只有屏幕和：768px）和（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;
}
}
/ *所有移动设备尺寸（设备和浏览器）* /
@media只有屏幕和（max-width：767px）{
.logo {
display：none;
}
}
/ *移动景观大小到平板电脑肖像（设备和浏览器）* /
@media只有屏幕和（最小宽度：480像素） （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;
}
}
}
/ *移动肖像尺寸到移动景观尺寸（设备和浏览器）* /
@media只有屏幕和-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 错误是什么意思，以及如何解决？
解决方案
LESS最令人沮丧的事情是它不太有用的调试信息。
这是第57行上一个简单的缺少分号。
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;
}
}
更正的代码工作良好
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;
}
}
I am using Incident57's CodeKit pre-processor to compile a series of less files that are being imported and minified into a single CSS file called template.css.
However, after making some edit (and I have no idea what edit caused this) I have started to get 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 imports 12 files:
@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";
Additionally, fonts.less itself imports 5 files
@import "font-awesome.less";
@import "font-awesome-ie7.less";
@import "font.bebas.less";
@import "font.leaguegothic.less";
@import "font.sourcesanspro.less";
The error seems to be related to / associated with the media queries.less file
/* 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;
}
}
Beyond that, I am completely lost.
What does the non_object_property_callError: Cannot call method 'charAt' of null error mean, and how do I solve it?
Any advice would be appreciated.
解决方案
Most frustrating thing about LESS is its less than helpful debug information.
It was a simple missing semicolon on line 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;
}
}
The corrected code worked fine
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;
}
}
这篇关于LESS编译错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！