与 Sass 相比,LESS 的优势在哪里?

前言

CSS 长久以来都是前端工程师最常用的语言之一。随着 Web 应用的日益复杂,CSS 的体积和复杂度不断增加,此时,CSS 预处理器也应运而生。CSS 预处理器可以为 CSS 增加变量、嵌套、Mixin 以及对于代码构建的更强的控制等等。

LESS 和 Sass 是最为流行的两种 CSS 预处理器,而本文将重点探讨与 Sass 相比,LESS 的优势在哪里。

变量

写 CSS 时,遇到频繁使用的颜色或字体等,我们都会想到使用变量的方式。优秀的 CSS 预处理器为我们提供了这种方式,而 LESS 则是其中之一。可以很方便地通过定义一个变量,来代表一个特定的颜色或字体大小。

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

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

嵌套规则

CSS 中常常需要为某一个元素嵌套添加多个层级的样式,这会造成代码的冗余。

LESS 通过嵌套规则来降低 CSS 的冗余性。可以很容易地对某一个元素及其子元素已经不需要的样式进行解耦或是覆盖。

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

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

Mixin

Mixin 是 CSS 预处理器提供的另外一个功能。它类似于一个函数,可以重复使用一段 CSS 代码。

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

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

Mixin 更大的优势是带参数。你可以把一段代码封装成一个 Mixin,依据不同的参数生成不同的 CSS 样式。

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

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

计算能力

LESS 更大的功能之一是它的计算能力。LESS 可以做简单的数学运算,添加和减少,比较和联系。

这个功能可以让你更轻松的进行 CSS 布局,减少两个以上相同的值等错误。

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

总结

相比 Sass,LESS 有着更友好的语法规则和更方便的入门体验。而且使用 LESS,没有人会担心和其他 CSS 预处理器的基本概念或常识的不同之处。

同时,LESS 有着非常出色的变量,嵌套,Mixin 和计算功能,能够简洁明了地管理和组织你的 CSS 代码。

这样一篇文章,如何呢,到此结束。希望对你了解 CSS 预处理器及其使用是有帮助的。

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


猜你喜欢

  • RESTful API 中快速实现 Swagger 自动生成 API 文档

    什么是 Swagger Swagger 是一种用于描述和记录 RESTful API 的框架和规范,具有自动生成 API 文档的功能。开发RESTful API 时,我们可以使用 Swagger 规范...

    1 年前
  • PWA 应用如何克服由浏览器安全策略引起的问题?

    什么是 PWA 应用? PWA(Progressive Web App,渐进式网页应用)是一种 Web 应用程序的体验,用户可以通过浏览器访问,但拥有原生应用程序的感觉。

    1 年前
  • Windows 上 Docker 安装及使用全介绍

    什么是 Docker? Docker 是一种开发、打包和运行应用程序的工具。它能够将应用程序及其依赖包装成一个容器,从而提供了更好的应用程序部署和管理方式。 通过使用 Docker,我们可以在同一台主...

    1 年前
  • Serverless 框架的价值与实践

    在传统的Web开发中,我们通常需要自己搭建Web服务器以及编写一些繁琐的代码,这样会占用大量的开发时间。Serverless框架的出现,给我们提供了一种简洁高效的解决方案,它通过抽象出底层的服务器和数...

    1 年前
  • 如何使用 Headless CMS 和 Next.js 构建灵活的电商平台

    在当今互联网时代,电商已经成为了商业发展的重要方向之一。而在电商平台的建设过程中,前端的技术扮演着至关重要的角色。如何使用 Headless CMS 和 Next.js 构建灵活的电商平台,就是我们今...

    1 年前
  • Fastify 中如何使用 Sentry 进行异常监控

    在前端开发中,异常监控是一项非常重要的工作。它可以帮助我们快速定位和解决问题,提升网站的稳定性和可靠性。本文将介绍如何在 Fastify 中使用 Sentry 进行异常监控。

    1 年前
  • 应用 ECMAScript 2019 的 Object.entries() 和 reduce 函数实现对象过滤与变形

    应用 ECMAScript 2019 的 Object.entries() 和 reduce 函数实现对象过滤与变形 随着前端开发技术的不断更新和发展,越来越多的新技术被引入到了前端开发中。

    1 年前
  • TypeScript 中如何处理 JSON 数据

    JSON(JavaScript 对象表示法)是在 Web 开发中最常用的数据交换格式之一。TypeScript 对 JSON 数据的处理提供了更好的类型检查和代码提示,同时也减少了出错的风险。

    1 年前
  • 在Angular应用程序中解决跨域及“无法找到”错误

    在开发前端应用程序时,我们经常会遇到跨域及“无法找到”错误。这些错误往往会让我们失去耐心,浪费大量时间和精力去寻找解决方案。本文主要介绍如何在 Angular 应用程序中调试和解决这些错误。

    1 年前
  • Mongoose 判断数据是否存在的方法

    Mongoose 是一个流行的 Node.js 框架,用于在 MongoDB 数据库中进行对象建模。它提供了一种方便的方式来连接 MongoDB 数据库,并对其进行 CRUD 操作。

    1 年前
  • 解决 SSE 在 HTTPS 环境下连接不上的问题

    前言 SSE(Server-Sent Events)是一种基于 HTTP 协议的服务器推送技术,通常用于实时更新网页内容。在使用 SSE 时,如果网站采用了 HTTPS 协议,就可能遇到连接不上的问题...

    1 年前
  • LESS 中使用变量和混合器的指南

    在前端开发中,常常会用到 CSS 预处理器的工具,如 LESS、Sass 和 Stylus 等,它们可以让 CSS 更加易于维护和扩展。LESS 是其中较为流行的一种,它的变量和混合器功能能够帮助开发...

    1 年前
  • 如何处理 Node.js 中的 HTTP 请求超时问题

    如何处理 Node.js 中的 HTTP 请求超时问题 在现代 web 应用程序中,与服务器的 HTTP 请求是不可避免的。但是,当网络状况不佳或服务器无响应时,经常会发生请求超时的情况。

    1 年前
  • CSS Grid 布局:如何实现网格中心对齐

    随着网页设计变得越来越注重响应式布局,CSS Grid 布局成为了许多前端工程师的首选。CSS Grid 布局是一种二维网格布局方式,可以轻松实现复杂的布局需求。本文就来讲讲如何使用 CSS Grid...

    1 年前
  • ES9 中的其他更新

    ES9 是 ECMAScript 的第九个版本,也称为 ECMAScript 2018,它增加了一些新特性,包括 RegExp 类的 dotAll、Intl.ListFormat 和 Promise....

    1 年前
  • GraphQL 中如何优化多表联合查询?

    GraphQL 中如何优化多表联合查询? GraphQL 是一个用于构建 API 的查询语言,它允许客户端精确地指定需要从服务端查询的数据,从而避免了冗余数据的传输。

    1 年前
  • Mocha 测试套件如何重试测试用例?

    Mocha 是一款流行的 JavaScript 测试框架,它支持异步测试、测试用例的分组和可扩展性等特性。然而,测试用例有时可能因为各种原因而失败,这对于我们来说是不可接受的。

    1 年前
  • 利用 RESTful API 实现 Web 应用程序的增量更新功能

    随着 Web 技术的不断发展,Web 应用程序的用户体验也越来越高,用户对 Web 应用程序的期望也越来越高。与此同时,Web 应用程序的体量也越来越大,如果每次都要重新加载整个页面,将给用户造成不必...

    1 年前
  • 使用 Jest 测试框架进行虚拟 DOM 测试

    在前端开发中,测试是一个非常重要的环节。其中,虚拟 DOM 测试可以有效地测试前端组件在各种情况下的行为,并且能够帮助你找出一些隐藏的问题。在本文中,介绍如何使用 Jest 测试框架进行虚拟 DOM ...

    1 年前
  • PWA 应用如何设计更好的交互效果?

    引言 PWA(Progressive Web Application) 是一种新型的同构应用解决方案,它基于 Web 技术栈,使得 Web 应用在离线情况下可以像原生应用一样具有交互和反应迅速的特性。

    1 年前

相关推荐

    暂无文章