什么是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 条评论
登录 后参与评论

相关文章

来自专栏SEO

「知识」HTML语义元素含义与SEO详细讲解

2887
来自专栏无原型不设计

成为优秀UI设计师,必须了解的UI设计规范

今天带来的这些规范,可是成为优秀UI设计师必须知道的“纯干货”,还能让大家深刻了解UI设计规范(https://ds.mockplus.cn)的本质是什么。

924
来自专栏Sign

web版《合成10》代码分享

变成月更了。 想做的事情很多,继续扩展『格斗节奏』,把『小红帽』文字冒险游戏成立一个童话系列,优化『月千之夜』和『破壳曼』,上线『Boo』。继续完成各个漫画系列...

3106
来自专栏BestSDK

一件交互设计大事,确定按钮放在左还是右?

其实这个问题,连世界最大的IT公司都没有确切的答案。 苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边...

3527
来自专栏lhyt前端之路

css菜鸡的自我救赎0. 前言1. 一些实践方案深入浅出2. 开始试试水

我们看百度搜索的顶部,顶部的#head(搜索框这一行都是)是fixed的,紧接着的那个div是一个tab。当然fixed脱离文本流,就用padding把自己的主...

573
来自专栏web前端教室

【投稿】记一次前端面试~James

今天发的文章是先行者计划成员-james的亲身经历,里面涉及很多前端开发及js的基础知识,相信对于新人面试会很有帮助。所以在取得原作者同意之后在公众号发出来,希...

772
来自专栏take time, save time

桌面山寨版2048---界面虽无聊,细节很重要

        弄个个人独立的博客是我的一个一直存在想法,毕竟不想当优秀工程师的程序员不是好码农,所以,我一直希望有个独立的博客来记录和分享自己的想法,最重要的...

2878
来自专栏知道一点点

bootstrap快速入门笔记(二)-栅格系统,响应式类

1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列

1283
来自专栏我就是马云飞

带你实现漂亮的滑动卷尺

前言 HenCoder最近在搞一个仿写活动,活动地址 http://hencoder.com/activity-mock-1/,之前关注过他写的关于绘制系列的文...

18110
来自专栏我分享我快乐

分享-类似谷歌浏览器图标的绘制方法

前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

30212

扫码关注云+社区