什么是CSS预处理器

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如下面的代码中就使用了变量$color)等等。

$color: red;

.test {
    color: $color;
}

在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

其它 CSS 预处理器语言:

CSS 预处理器技术已经非常的成熟,而且也涌现出了很多种不同的 CSS 预处理器语言,比如说:

  1. Sass(SCSS)
  2. LESS
  3. Stylus
  4. Turbine
  5. Swithch CSS
  6. CSS Cacheer
  7. DT CSS

到目前为止,在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀,讨论的也多,对比的也多。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客慕白的成长之路

Web前端开发推荐阅读书籍、学习课程下载

学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢?

5395
来自专栏前端说吧

小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

4807
来自专栏针针小站

【IFE】Day 1 – 百度前端技术学院 基础学院 学习笔记(一)

1646
来自专栏QQ会员技术团队的专栏

深刻理解 React (一) :JSX 和虚拟DOM

首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React...

3K0
来自专栏钱塘大数据

【干货】2017年值得关注的JavaScript框架与主题

导读:JavaScript的繁荣促生了很多优秀的技术、框架与工具库,这空前的繁荣也给很多人造成了困惑,无所适从。到底何者是值得投入,代表了未来的方向,而何者又是...

3436
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(七)Bootstrap

随着Web应用变的越来越复杂,在大量的开发过程中我们发现有许多功能模块非常相似,比如轮播图、分页、选项卡、导航栏等,开发中往往会把这些具有通用性的功能模块进行一...

1333
来自专栏web前端教室

【规整】网页怎么做才不会外行?

网页怎么做才不会外行?这句话的意思就是说,你做的网页在浏览器里打开,像我这样的人扫一眼,就能判断出这是一个新手的练手作品?还是一个工作能力可靠的人做的。

962
来自专栏前端迷

React 还是 Vue: 你应该选择哪一个Web前端框架?

2016年,React在Web端和移动端都实现了迅速的成长,稳稳地领先于其主要竞争对手Augular,巩固了其作为前端框架之王的地位。

2952
来自专栏达摩兵的技术空间

pc与手机页面的差别分析

也许你还没有过多的思考过手机页面与pc页面的差别,也没从产品角度思考过从产品设计上两者有什么不同,那么不妨跟小编一起去思考下,也许能给你一些有益的启示。

1023
来自专栏进击的君君的前端之路

初识React

1322

扫码关注云+社区

领取腾讯云代金券