让Less不进行计算/编译的方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让Less不进行计算/编译的方法相关的知识，希望对你有一定的参考价值。
参考技术A Less 很好很强大，极大的提高的写 CSS 的便利性。但在有些情况下我们并不需要其的编译，比如我们想写如下的样式经过 Less 的编译，最后呈现出来的样式是
Less 帮我们进行了数值计算，并保留了前者的单位 vh 。
官方提供了 Escaping 的特性，将属性当字符串用引号括起来，并在前面加上波浪符 ~ ，修改后的写法如下：
LESS 编译错误
【中文标题】LESS 编译错误【英文标题】：LESS compile error 【发布时间】：2012-11-11 07:55:03 【问题描述】：我正在使用 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.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: Cannot call method 'charAt' of null 错误是什么意思，如何解决？
任何建议将不胜感激。
【问题讨论】：
【参考方案1】：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;
【讨论】：
以上是关于让Less不进行计算/编译的方法的主要内容，如果未能解决你的问题，请参考以下文章