1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

什么是 CSS 预处理器?

作者:用户 来源:互联网 时间:2016-08-03 16:40:07

编程css语言编程语言易语言预处理编程 批处理批处理编程-一些易语言定义变量预处理器CSS处理

什么是 CSS 预处理器? - 摘要: 本文讲的是什么是 CSS 预处理器?, 就CSS本身而言,对于大多数Web前端从业人员来说就不是问题。学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。换句话说

就CSS本身而言,对于大多数Web前端从业人员来说就不是问题。学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。换句话说,CSS基本上是设计师的工具,不是程序员的工具。在程序员的眼里,CSS是很头痛的事情,它并不像其它程序语言,比如说PHP、Javascript等等,有自己的变量、常量、条件语句以及一些编程语法,只是一行行单纯的属性描述,写起来相当的费事,而且代码难易组织和维护。

很自然的,有人就开始在想,能不能给CSS像其他程序语言一样,加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理。这样一来,就有了“CSS预处器(CSS Preprocessor)”。

CSS 预处理器

定义:

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

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

其它 CSS 预处理器语言:

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

  • Sass(SCSS)
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

如此之多的 CSS 预处理器,那么“我应该选择哪种 CSS 预处理器?”也相应成了最近网上的一大热门话题,在 Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上,很多人为此争论不休。相比过去我们对是否应该使用 CSS 预处理器的话题而言,这已经是很大的进步了。

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

  1. $color: red; 
  2.  
  3. .test { 
  4.     color: $color; 

执行结果:
 

  1. .test { 
  2.  
  3.   color: red; 


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索编程 , css , 语言 , 编程语言 , 易语言 , 预处理 , 编程 批处理 , 批处理编程- , 一些 , 易语言定义变量 , 预处理器 CSS处理 css预处理器、css预处理器的优缺点、css预处理器有哪些、css预处理器 知乎、css预处理器那个好,以便于您获取更多的相关知识。

字体-关于web前端 css 选择器的问题

... 我想请问通用选择器和body选择器的区别是什么? 为什么我用通用选择器定义好默认样式之后,在后续定义样式时很难改变例如 *{ font:12px Arial,"Mcrosoft Yahei",Verdana; } 后边我定义字体大小时,字体大小不会改...

IE6下PNG图像不透明二种解决方案

...东西刚出来的时候国内就有人发过这个方法,但不知道为什么,没引起什么“效应”,很多人还是在用上面说的“更具局限性”的方法。   使用方法很简单,首先下载调用JS,然后在使用PNG的页面中引用代码,由于是针对IE6处...

6个代码编写技巧 让你的编码技能飞跃提升

...情要做,而你也不仅仅只能在用js编写模块化的代码. CSS 预处理器,像 Sass (这里有介绍),它们可以让你 把CSS文件写在分开的文件中,然后可以在你编译它们的时候在把它们包含在一个主文件中. 这可以让你为不同的组件,像按...

Sass和LESS-动态CSS技术

...ap丰富的UI组件支持。 X、参考&引用为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus CSS预处理器——Sass、LESS和Stylus实践 Sass中文网 和Sass英文官网 Sass入门篇和进阶篇-慕课网 Sass和Compass必备技能之Sass篇-慕课视频 Sass和...

谈谈PostCSS

...首先,还是介绍一下它们吧。它们有个统一的名字——css预处理器。何为CSS预处理器。应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。它们的出现可以说是恰逢其时,解决了css的一些缺憾:...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备