谈谈css中的3种预处理器

发布日期:2020年9月25日 22:24 星期五

  • 正文内容
  • 相关推荐

本篇文章给大家介绍一下三种css预处理器的,以及比较一下,了解他们之间的差异。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

 

谈谈css中的3种预处理器

一、介绍

CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

css预处理器种类繁多,三种主流css预处理器是Less、Sass(Scss)及Stylus;它们各自的背景如下:

Sass:2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架。

目前受LESS影响,已经进化到了全面兼容CSS的SCSS(SCSS 需要使用分号和花括号而不是换行和缩进)。

Less:2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS。

其缺点是比起SASS来,可编程功能不够。

不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。

Stylus:2010年产生,来自Node.js社区。

主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。

二、比较

在使用 CSS 预处理器之前最重要的是理解语法,幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。

首先 Sass 和 Less 都使用的是标准的 CSS 语法,因此如果可以很方便的将已有的 CSS 代码转为预处理器代码,默认 Sass 使用 .sass 扩展名,而 Less 使用 .less 扩展名。

h1 {

  color: #0982C1;

}

这是一个再普通不过的,不过 Sass 同时也支持老的语法,就是不包含花括号和分号的方式:

h1

  color: #0982c1

而 Stylus 支持的语法要更多样性一点,它默认使用 .styl 的文件扩展名,下面是 Stylus 支持的语法:

/* style.styl */

h1 {

  color: #0982C1;

}

  

/* omit brackets */

h1

  color: #0982C1;

  

/* omit colons and semi-colons */

h1

  color #0982C1

可以在同一个样式单中使用不同的变量,例如下面的写法也不会报错:

h1 {

  color #0982c1

}

h2

  font-size: 1.2em
趣乐分享-趣乐资源网
如有密码均为:www.itql.cn
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:209993299  

作者资料
描述: 90后草根站长!不忘初心,方得始终!

本文标签:

文章标题:谈谈css中的3种预处理器

文章链接:https://www.itql.cn/post-3995.html

版权声明:若无特殊注明,本文皆为《钱哆哆》原创,转载请保留文章出处。