温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中的预处理器有哪些

发布时间:2020-10-12 14:44:05 来源:亿速云 阅读:270 作者:小新 栏目:web开发

这篇文章主要介绍了css中的预处理器有哪些,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

一、介绍

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 扩展名。

h2 {
  color: #0982C1;
}

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

h2
  color: #0982c1

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

/* style.styl */
h2 {
  color: #0982C1;
}
 
/* omit brackets */
h2
  color: #0982C1;
 
/* omit colons and semi-colons */
h2
  color #0982C1

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

h2 {
  color #0982c1
}
h3
  font-size: 1.2em

感谢你能够认真阅读完这篇文章,希望小编分享css中的预处理器有哪些内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI