解决 LESS 编译出错:Unrecognised input

LESS 是一种 CSS 预处理器,它能够在 CSS 中引入变量、混合、嵌套规则等特性。但是在使用 LESS 进行编译时,有时会遇到 "Unrecognised input" 错误。本文将帮助你解决这一问题,同时也会介绍一些 LESS 的基本语法和技巧。

什么是 "Unrecognised input" 错误?

当 LESS 编译器遇到不可识别的语句或字符时,就会抛出 "Unrecognised input" 错误。这种错误常常发生在 LESS 文件中包含了非法的 CSS 代码,或者在 LESS 文件中使用了无法识别的 LESS 语法。

下面是一个例子,当在 LESS 文件中引入 CSS 注释时,就会引发 "Unrecognised input" 错误。

-- ---- ----
------- -----

--
--------- -
  ------ -------
-
--

-- --- -- ---- ----

在上面的例子中,LESS 文件中包含了一个 CSS 注释块,虽然这个注释块本身是合法的,但由于 LESS 编译器无法识别这个块,因此会导致编译出错。如果这时你运行 LESS 编译器,就会看到如下的错误信息:

------------ -----
  --------- -
  -
  ------ -------

如何解决 "Unrecognised input" 错误?

解决 "Unrecognised input" 错误的方法主要有两种:删除不合法的语句或字符,或者修改代码以使之符合 LESS 语法规则。

删除不合法的语句或字符

这种方法适用于代码中包含了不能被 LESS 识别的语句或字符。例如,在 LESS 文件中包含了不合法的 CSS 注释块,可以直接将其删除,使得 LESS 编译器能够正确识别代码。如果在 LESS 文件中包含了某些无法识别的字符,例如,特殊的 Unicode 字符或不可见字符,也可采用此方法。

修改代码以使之符合 LESS 语法规则

这种方法适用于代码本身符合 LESS 语法,但还是被 LESS 编译器不识别的情况。例如,在 LESS 文件中使用了不完整的 LESS 语法,例如,忘记了关闭一个括号或分号等,就会引发编译错误。此时,只需要修改代码,使其符合 LESS 语法规则即可。

例如,下面是一个 LESS 文件中包含了缺少分号的变量定义语句:

-- ---- ----
------- ----

---- -
  ----------------- -------
-

-- --- -- ---- ----

在上面的代码中,变量定义语句中缺少了分号,会导致 LESS 编译器无法正确解析代码,从而报错。如果你运行 LESS 编译器,就会看到如下的错误信息:

------------ -----
------- ----
-
---- -

为了解决这个编译错误,你只需要在变量定义语句末尾添加一个分号即可:

------- -----

---- -
  ----------------- -------
-

LESS 的基本语法和技巧

在 LESS 中,变量定义和嵌套规则是两个非常基本的语法特性。下面是一个例子,演示了如何在 LESS 中定义变量和使用嵌套规则:

-- ---- ----
-------------- --------

---- -
  ----------------- ------
  ------ --------------

  - -
    ------ --------------
    ---------------- -----
    ------- -
      ---------------- ----------
    -
  -
-

-- --- -- ---- ----

在上面的例子中,我们定义了一个名为 @primaryColor 的变量,并使用它来指定一些样式。我们还嵌套了一个 a 元素的样式,使用了 & 符号来表示其父元素。在编译这个 LESS 文件时,LESS 编译器会自动展开嵌套规则,生成相应的 CSS 样式。

结论

通过本文你已经了解了什么是 "Unrecognised input" 错误,以及如何解决这一问题。同时我们还介绍了 LESS 的基本语法和技巧,希望对你日后的 LESS 编程有所帮助。LESS 提供了非常方便的方式来管理大型 CSS 代码库,使用 LESS 编译器能够让前端开发人员更加高效地管理和维护 CSS 代码。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/670c6efd66ef9cf37fb11a9a


猜你喜欢

  • Web Components 的组件库与各种 UI 框架对比评测

    Web Components 是一种用于创建可重用组件的 Web 标准。它们允许您将组件封装起来,以便在多个项目中重用,而无需考虑实现的细节。这个特性使得 Web Components 成为前端工程师...

    6 天前
  • Fastify 应用程序中的文件上传进度条教程

    如果你正在开发一个需要文件上传功能的 web 应用程序,那么你可能会遇到一个非常棘手的问题:如何显示上传进度条以及如何在上传过程中处理它? 在本文中,我们将介绍如何使用 Fastify(一个高效、低开...

    7 天前
  • 30 天 JavaScript 实战第 13 天 -- Promise 异步编程技巧 ES6 篇

    前端开发中,异步编程是一项非常重要的技能,因为 HTML、CSS、JavaScript 等资源的文件加载、网络请求以及浏览器本身的事件都属于异步操作。在 JavaScript 中,我们可以使用回调函数...

    7 天前
  • 将 ECMAScript 2020 中的 Nullish Coalescing Operator 用于更好的代码维护

    在前端开发中,我们经常需要在代码中判断某个值是否为空,如果为空则使用默认值。在早期的 JavaScript 版本中,我们通常使用短路运算符来实现这个功能,例如: ----- -------- - --...

    7 天前
  • 如何使用 Mocha 进行 Express 应用程序测试

    Mocha 是一个流行的 JavaScript 测试框架,可以用于 Node.js 应用程序的单元测试和集成测试。在本文中,我们将介绍如何使用 Mocha 测试 Express 应用程序。

    7 天前
  • GraphQL 协议介绍及实战经验分享

    前言 GraphQL 是一种现代化的数据查询和操作协议,它由 Facebook 开发并于 2015 年首次公开发布。GraphQL 能够满足现代应用程序在数据查询和操作上的需求,使得前端开发人员更加高...

    7 天前
  • 使用 SASS 为 IE 兼容性写特定样式的注意事项

    在前端开发过程中,我们经常会遇到要为不同浏览器写特定的样式,其中最具有挑战性的就是兼容 IE 浏览器。为了提高效率和可维护性,我们可以使用 SASS 预处理语言来为 IE 浏览器编写特定的样式。

    7 天前
  • 使用 ES8 中的 promise.finally() 为每个异步请求添加 finally 处理程序

    在前端开发中,我们经常会遇到异步请求的情况,比如通过 Ajax 请求获取数据或者通过 Promise 等方式进行异步操作。有时候我们需要在请求结束后执行一些处理操作,例如清空表单、隐藏加载中的提示等等...

    7 天前
  • 使用 TypeScript 实现高质量的 React 应用程序

    前言 React 是一个非常流行的 JavaScript 库,它可以帮助开发者快速构建 Web 应用程序。但是,在开发大型 React 应用程序时,难免会有一些问题,例如类型错误、代码难以维护等。

    7 天前
  • RxJS 中的逆转操作符使用指南

    RxJS 是一个强大的库,可以为前端开发人员大大简化异步操作。在使用 RxJS 时,逆转操作符是非常有用的工具,可以用于将事件流逆转并操作流中的元素。本文将介绍 RxJS 中的逆转操作符,如何使用它们...

    7 天前
  • 在Fastify应用程序中使用YAML配置文件

    Fastify,是一个基于Node.js的高效开发框架,它的速度比大多数Web框架都要快。配置文件在服务器端应用程序开发中具有重要的作用,它可以帮助我们快速且方便地配置应用程序。

    7 天前
  • Headless CMS 在数字化医疗领域的应用场景探索

    在数字化医疗领域,随着技术的不断进步,越来越多的医疗机构开始使用 Headless CMS 技术来构建数字化应用。Headless CMS 技术允许开发者从传统的 CMS 模式中解脱出来,创造出更加灵...

    7 天前
  • Tailwind CSS 如何兼容 IE 和 Edge

    Tailwind CSS 是一种流行的前端库,它可以帮助开发者快速构建样式,使得页面看起来更加漂亮。然而,尽管大多数现代浏览器支持最新的 CSS 特性,但一些老旧的浏览器(比如 IE 和 Edge)并...

    7 天前
  • GraphQL 中的数据模型设计解析及最佳实践

    在现代 Web 开发中,前后端分离的开发模式已经得到了广泛的应用。GraphQL 作为一种新的 API 开发和查询语言,提供了一种更加灵活、高效的数据交互方式,被越来越多的开发者所关注和使用。

    7 天前
  • 如何在 Deno 中测试代码

    Deno 是一个安全可靠的 JavaScript 和 TypeScript 运行时环境,它内置了很多有用的工具和特性,例如内置的模块系统、异步 I/O、安全沙箱等等,让我们可以更加方便地构建与运行 W...

    7 天前
  • ECMAScript 2021(ES12)中的Reflect新特性:详解与实例

    Reflect是JavaScript中一个非常有用的内置对象,它提供了许多常见操作的底层方法,如创建对象和修改属性等。在ECMAScript 2021(ES12)中,Reflect引入了一些新特性,本...

    7 天前
  • CSS Reset 的重要性和优点

    CSS Reset 是一种用于重置浏览器默认样式的技术,它能够清除大量不必要的样式,并使不同浏览器在显示页面时保持一致。此外,CSS Reset 还能够使开发人员更加方便地编写样式,避免因不同浏览器的...

    7 天前
  • 如何使用 Chai.js 编写 JavaScript 的可维护性单元测试

    什么是 Chai.js Chai.js 是一个流行的 JavaScript 断言库,它可以与许多测试框架配合使用,如 Mocha,Jasmine 等。Chai.js 提供了自然语言的断言语法,可以方便...

    7 天前
  • 提供图形化无障碍信息的网站设计技巧

    我们设计网站时,要考虑到残障人士也能够方便地访问和使用网站。其中一个重要的方面就是提供图形化无障碍信息。本篇文章将介绍一些网站设计的技巧,旨在让你能够设计出易于残障人士使用的网站。

    7 天前
  • 解决 Cypress 访问站点 403 错误的问题

    最近在使用 Cypress 进行前端自动化测试时,遇到了访问站点发生 403 错误的问题。这个问题很常见且容易解决,但是对新手来说可能会遇到很多困难。在这篇文章中,我将为大家提供解决这个问题的方法和技...

    7 天前

相关推荐

    暂无文章