4

我使用Incident57的CodeKit預處理器編譯一系列較少的文件,這些文件被導入並縮小到一個名爲template.css的CSS文件中。LESS編譯錯誤

然而,做一些編輯後(我不知道編輯導致此),我已經開始得到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"; 

該錯誤似乎是與媒體查詢有關/相關聯。無文件

/* 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錯誤的意思,我該如何解決它?

任何意見,將不勝感激。

回答

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; 
    } 
}