跳到主要内容

哪个是最好的CSS预处理器?

市场上有许多CSS预处理器。您可能听说过Less和Sass(如果没有,请查看我们的文章什么是萨斯?),但有许多其他选项可能更适合您的需求。在这里,我们仔细研究一下所有不同的预处理器,以及每个预处理器的优缺点。使用右侧的快速链接跳转到特定部分。

首先要谨慎。早在2007年,乔恩克里斯托弗写了一篇博客文章请不要使用CSS框架,今天他的很多评论都是正确的。 “框架的一个大问题是,即将到来的开发人员将自己附加到框架而不是底层代码本身。在这种情况下获得的知识围绕着一个特定的框架,这严重限制了开发人员。“虽然预处理器无疑可以让您的生活更轻松,但依赖于框架将永远存在降低您对核心语言的理解的危险。

01. 萨斯

“Sass是世界上最成熟,最稳定,最强大的专业级CSS扩展语言”。这来自制造商,但很难比较。 11年多来,Sass背后的团队一直致力于构建一个功能丰富的预处理器,拥有大型社区来支持,开发它及其用户,并已被业内一些知名人士采用。它提供了迄今为止最具参与度的社区,每个主要的代码教学平台都有论坛,专用网站和教程 - 请看一下萨斯之路特别是。

Sass基于Ruby构建,根据用户的偏好提供两种不同的语法类型。 Sass在规则末尾不使用选择器或分号周围的大括号,但功能方面与SCSS(Sassy CSS)相同,后者仍使用这两者。

SCSS是最常用的语言选择,主要是因为它在语法上与普通CSS没有区别,这使得采用基本原则变得非常容易。此外,每个主要任务运行器都有一个与Sass一起使用的模块。

还有一个名为LibSass的Sass预编译器的C / C ++端口,它将Sass与Ruby分离。它快速,便携且易于构建,并与各种平台和语言集成。

优点

  • 最低的进入门槛 - 您可以通过简单地学习几个新符号来利用一些最强大的功能
  • 新的合作者应该毫不费力地捡起它。
  • LibSass(将Sass与Ruby分离)快速,便携且易于构建
  • 到目前为止,参与度最高的社区,拥有充足的支持和资源

缺点

  • 与任何框架一样,存在一种危险,即您将依赖于此方法,而不是完全掌握基础语言

02.

Less在风格上非常类似于Sass的功能集,所以任何使用过它的人都会觉得在家里与另一个人在一起。在Twitter Twitter Bootstrap中使用后,它的受欢迎程度大大提升。它已经在Bootstrap 5中转移到Sass,但它让很多人习惯使用它的语法。

事实上它与萨斯非常相似,因此当Sass被更广泛地使用,积极开发和功能丰富时,很难提倡 - 如果有更多的差异和独特的销售,这个功能将比较两者(如前所述)关于Less的要点。尽管如此,它仍然是一个受欢迎且强大的预处理器。

优点 

  • 用JavaScript编写,使设置变得简单
  • GUI应用程序可以为您监视和编译代码(Crunch,SimpLESS,WinLess,Koala,CodeKit,LiveReload或Prepros)
  • 非常详细的文档和非常活跃的社区
  • 很容易找到帮助或以前的例子
  • VS Code,Visual Studio和WebStorm等IDE本身或通过插件支持Less

缺点

  • 用途@声明变量,但在CSS中,@已经有意义(它曾用于宣布@媒体查询和@keyframes)这会引起混淆
  • 由于更广泛的使用,学习Sass的时间可能会更好
  • 完全依赖于mixins,而不是允许您使用可以返回值的函数,这可能会导致用例略有限制

03. 唱针

Stylus由TJ Holowaychuk创建,他是Node.js的前程序员和Luna语言的创建者。它的初始设计受到了Sass和Less的影响,但它提供了更广泛的功能,引擎盖下的超快Node.js系统,并为用户提供了编写CSS的最大自由度。

然而,这种自由有一个缺点。如Declan De Wet他说:“它为开发人员提供了明确的方向......一旦你在变量,混合和函数中根深蒂固,不需要预先设置的美元符号($)或'at'符号(@),你很快就会意识到你不能再区分它们了。这使代码非常混乱“。

Mozilla使用Stylus重新设计其开发人员网络,它提供了Sass部分所涵盖的大部分内容,但语法上有一些细微差别。

优点

  • 非常强大内置功能 
  • 可以在你的风格中做更多的计算和“繁重”
  • 用Node.js编写,速度快,适合2018 JavaScript堆栈
  • 'Pythonic'语法看起来更清晰,需要更少的字符

缺点

  • 太宽容,这会导致混乱
  • 似乎没有非常积极的发展

04. PostCSS

基于其方法,PostCSS是Sass,Less和Stylus在预处理方面最大的“替代品”之一:它利用模块化插件系统,允许用户根据需要自定义其功能集和编译。这意味着,您可以选择完整的库,而不仅仅是完整地采用库。

与许多其他预处理器不同,PostCSS不会对您正在使用的功能或堆栈做出任何假设。相反,您只需根据要使用的功能添加所需的插件。您可以添加插件,使其具有与Sass等库完全相同的功能。这种模块化方法意味着您甚至可以完全自己使用插件,例如自动前缀和缩小,而不是构建完整的库。

优点

  • 不受约束的模块化方法 - 可以大量定制
  • 用纯CSS编写,因此开发人员不需要学习新的语法
  • 速度(如果你只使用几个插件)

缺点

  • 速度(再次) - 如果模仿另一个设置,PostCCS缺乏专用的优化工具将提供的性能优势
  • 通常,安装和维护比传统预处理器更多,因为您依赖于不同人员维护的不同插件

05. Pleeease

Pleeease采用略微不同的预处理方法,因为它试图用CSS解决一些更实际的问题,而不是纯粹关注它的语法或布局。它的网站解释说:“一个可以轻松处理你的CSS的Node.js应用程序。它简化了预处理器的使用,并将它们与最好的后处理器相结合。它有助于创建干净的样式表,支持旧版浏览器并提供更好的可维护性“。

Pleeease提供了对旧版浏览器开箱即用常见问题的回退,包括当您使用rems作为选择度量时的像素回退,以及使用不透明度时过滤IE8的回退。

它甚至还有一个功能,允许您在Pleeease的设置(以及纯CSS)中使用您喜欢的预处理器的语法,如Sass或Less,尽管这在此时是实验性的。

优点

  • 内置自动修复程序使用来自的数据添加供应商前缀Caniuse.com
  • 生成源映射,您可以在其中查看原始代码
  • 工具而不是语法库,因此您可以将其与纯CSS或其他预处理器一起使用
  • 清晰,实用的处理旧浏览器怪癖的用法

缺点

  • 不太知名,这可能使寻找资源变得困难
  • 允许包含其他预处理器的功能在此阶段完全是实验性的

06. CSS-粉碎

CSS-Crush是一个标准灵感的预处理器,旨在实现现代和整洁的CSS工作流程。它是用PHP编写的,它结合了您期望在一个更流行的预处理器(变量,嵌套,mixins)中使用的标准功能,以及我们已经涵盖的一些更基于工具的方法,如Pleeease(供应商前缀,缩小) )。

CSS-Crush的PHP背景意味着它可以与流行的PHP内容管理系统(如WordPress或Drupal)一起使用。这可能是它最大的专业人士,因为如果你只局限于CMS内部可以做的事情,你可以将它作为插件安装,并且仍然可以享受预处理器的一些优点。

一个好处是它的供应商前缀属性,功能,@-rules甚至完整声明都会自动生成。这意味着您可以在保持源代码清洁的同时保持跨浏览器支持。

优点

  • 与流行的PHP CMS(WordPress,Drupal等)整合
  • 开源,所以你理论上可以解决你自己的问题
  • 有用的插件,例如使用aria角色和HTML画布
  • 内置自动修复功能,适用于跨浏览器样式

缺点       

  • 尽管有各种各样的功能,但缺乏普通PHP编程社区之外的流行度
  • 缺乏维护(在撰写本文时)

07. 花园

这个选项与所有其他选项完全不同,因为它几乎消除了我们所知道的CSS的传统语言。 Garden是一个用于在Clojure和ClojureScript中渲染CSS的库。它使用向量来表示规则和映射来表示声明。它专为“样式表作者而设计,他们对交易编程语言的预处理器时可能会有什么感兴趣。”

就编程语言而言,Clojure以其干净的架构和坚定的传统而闻名。对于CSS来说,这意味着强大的力量。但是,语法可能令人生畏。例如,不设置font-weightH1H2标签,你会用:user =>(css [:h1:h2 {:font-weight“none”}])

优点

  • 访问Clojure中强大的编程语言的核心功能
  • 完全使用相同语言编写项目代码的独特机会:用于后端编程的Clojure和用于CSS的Garden
  • Garden Gnome插件使您可以直接将样式更改为浏览器而无需重新加载

缺点

         

  • 您不能简单地将CSS从其他地方复制并粘贴到您的工作中 - 每个代码段都必须转换为正确的格式
  • 与常规CSS或任何其他预处理器的语法非常不同,使其更难以阅读
  • 花园的学习曲线比其他选择更陡峭

08. 样式组件

最后一个选项是传统预处理器的支点。我只是在这种情况下提出它,因为它是一种以某种方式和布局编写样式并将其与组件逻辑一起转换为浏览器就绪CSS的方式。这里仅介绍基础知识及其样式处理。

正如Glen Maddern所说,Styled Components是'CSS-in-JS for CSS folk'。这是通过将其交织到您编写的JS组件中来制作真正模块化CSS的最新尝试。它比内联React样式有一个很大的优势,因为你没有驼峰的属性,并且你将每个样式块直接声明为你将使用它的元素的名称。

因此,例如,创建一个“渲染”的标题组件

标记一些样式,你会写这个:

const Title = styled.h1` font-size:1.5em; text-align:center;颜色:palevioletred; `;

优点

  • 您可以实现组件的完全封装 - 每个标记,逻辑大跟随,以及活动社区和项目所有者
  • 代表着一种迷人的方向转变
  • 防止“仅附加风格”。什么是追加款式?

缺点

  • 你回到编写简单的CSS,它有它的缺点
  • 相当自以为是,因为它是专门用于React JS库的
  • 您必须使用其他方法处理跨浏览器问题和回退

本文最初发表于创意网页设计杂志Web Designer。买第276期要么订阅

阅读更多:



翻译字数超限