scss,less,stylus这些css处理器该怎么选择

css作为前端三剑客,从诞生以来很少变化,css3都已经诞生了20年,和js的框架层出不穷相比,似乎css就不需要框架,就不需要更优化的写法。然而在追求极致的程序员面前,代码的可维护性,代码的优雅性有迫切希望改进css代码的编写,于是css预处理器诞生了

css预处理器

由于浏览器只能理解和识别纯CSS语法,因此不能简单地用全新的语言代替它。但是,目前的css确实有一些局限性,这在小型项目中可能并不重要,但是在处理庞大的样式表时确实会付出巨大的代价。要变通解决此问题,开发人员发明了CSS预处理器。本质上,预处理器是具有自己独特语法的程序。您编写代码后,他们会将其编译为纯CSS。这和现在流行的TS是一个道理。

scss,less,stylus这些css处理器该怎么选择

我们使用CSS预处理程序的原因是添加CSS否则无法提供的其他功能。例如,我们可能具有嵌套或继承选择器,以及mixins(可重用的声明包)。预处理器便捷的附加功能使我们在书写css的时候更加高效,并且可以灵活配置。

Sass与scss

Sass是预处理器的鼻祖,它诞生于2006年,很多后来的预处理器都从它这里借鉴了大量思想。

到目前为止,它具有两种单独的语法:Sass和SCSS。是的,Sass和SCSS只是Sass的两种语法,其中SCSS是在Sass第三个版本中引入的,它采用了和之前不一样的语法。

scss,less,stylus这些css处理器该怎么选择

Sass和SCSS之间的主要区别在于,SCSS与CSS一样使用分号和方括号。另一方面,Sass它使用等号而不是冒号进行赋值。尽管现在SCSS已经正式成为Sass CSS预处理程序的主要语法,但是还没有计划弃用原始版本的计划。

Less

Less最早出现在2009年。它受Sass的影响,但对后来引入的SCSS格式有影响。因为与Sass语法的第一个版本不同,所以此CSS预处理程序最初是为了尽可能地与纯CSS类似而创建的。这不仅意味着学习它会很快上手,而且还可以使用在Less中有效的任何预编写CSS代码。Less CSS预处理器本身是用JavaScript编写的,这也简化了设置。

scss,less,stylus这些css处理器该怎么选择

比较Less与Sass,我们会发现它们的基本功能非常相似。它们都允许嵌套,导入和使用变量。但是,在Less中,您还可以提升变量并从Sass无法使用的颜色中提取某些成分,即色调,饱和度,光度和亮度。另一方面,Sass允许您使用if语句并将其插入选择器和属性名称中。它的语法还包含三元运算符和嵌套收集器。

Less的另一个小缺点是使用@符号进行变量声明(Sass使用$符号代替)。但是,在CSS中,@也可以用于关键帧和媒体查询。在阅读代码时,这可能会引起一些混乱。

Stylus

Stylus诞生于2010年。尽管它的用户群明显少于Sass或Less,但仍然值得研究。Stylus是用Node.js编写的,因此对于那些已经熟悉nodejs环境的人来说是一个不错的选择。同时它也具有内置函数和mixin。

Stylus与众不同之处在于其灵活性:冒号,分号和逗号都是可选的。此外,我们不需要花括号来定义代码块:Stylus使用缩进代替符号。对于变量,我们可以像在Sass中那样使用 $ 符号,但是也可以不使用它,这一切都由我们自己决定。

用最少的代码写出样式是Stylus一直追求的,然而这也可能导致代码可能不易于阅读,但是这主要看个人,毕竟一些新事物的诞生,本身就需要花费一些时间。

PostCSS

PostCSS是不是实际上是一个CSS预处理器。因为它可以用作预处理器,后处理器,实际上它是各种处理器,它们也可以帮助您优化,清理代码以及执行各种其他任务。本质上讲,PostCSS是一个具有大量可启用JavaScript插件的API(。使用它们,您可以处理CSS并创建自定义工具。

PostCSS最初于2013年发布。您可以将其与普通CSS语法和上述预处理器一起使用。它最大的优点就是模块化,我们需要的各个功能都可以通过引入各个模块完成,因此,它的效率是非常高的。

总结

虽然我们说了这么多预处理器的好处,但是它也并不是没有缺点,比如css的调试,需要编译,文件过大都是它的缺点。

scss,less,stylus这些css处理器该怎么选择

当然,我们考虑一件事情的时候,一定是会分析它的利弊的,相对于变量,混入,嵌套,易于维护的这些优雅的功能,它的优点已经可以大大弥补它的缺点了。

不要过多纠结到底选择哪一个css预处理器,重要的是先选择一个上手,你会发现自己会慢慢爱上它们的。

未经允许不得转载:一点博客-青梅煮码-共享博客 » scss,less,stylus这些css处理器该怎么选择
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏