CSS 预处理器

在程序员眼里,css不像其余程序语言(例如PHP, Javascript等等),有本身的变量、常量、条件语句以及一些编程语法,它只是一行行单纯的属性描述,写起来至关费事,并且代码难以组织和维护。天然的有人开始想,能不能给css像其余程序语言同样,加入一些编程元素,让css能像其余程序语言同样能够作一些预约的处理,就这样,有了"css预处理器(css preprocessor)”。css

具体什么是css预处理器呢?html

css预处理器定义了一种新的语言,其基本思想是:用一种专门的编程语言,为css增长一些编程特性,将css做为目标生成文件,而后开发者只要使用这种语言进行编码工做,而后再编译成正常的css文件,以供项目使用。使用css预处理器无需考虑浏览器的兼容性问题,你能够在css中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可让你的css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。node

css预处理器技术已经很是成熟,目前也出现了多种不一样的css预处理语言,Sass (SCSS)、LESS、Stylus等等程序员

Sass简介

Sass号称是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。彻底兼容全部版本的CSS,拥有比其余任何CSS扩展语言更多的功能和特性,行业内把Sass做为首选css扩展语言。sass基于Ruby语言开发而成,所以安装sass前须要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)编程

Sass中文网:https://www.sass.hk/bootstrap

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展,全部 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特点功能。此外,SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax),以及早期的 IE 滤镜写法。这种格式以 .scss 做为拓展名。浏览器

另外一种也是最先的 Sass 语法格式,被称为缩进格式 (Indented Sass) 一般简称 "Sass",是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,不少人认为这样作比 SCSS 更容易阅读,书写也更快速。缩进格式也可使用 Sass 的所有功能,只是与 SCSS 相比个别地方采起了不一样的表达方式,具体请查看 the indented syntax reference。这种格式以 .sass 做为拓展名。sass

Less简介

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增长了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。ruby

Less 是基于JavaScript写的,能够运行在 Node 或浏览器端。less

Less中文网:http://lesscss.cn/

bootstrap文档:http://www.bootcss.com/p/lesscss/#synopsis

Stylus简介

用于node,js,,支持去掉'{}',':',';','()'

中文文档:http://www.zhangxinxu.com/jq/stylus/

相关文章
相关标签/搜索