CSS开发框架compass

最近在学习一个游戏开发框架,除了开发语言是最新的之外,给我的影响比较深的是国外的开发者擅长利用开发工具来提高项目的效率和质量,在这里跟大家介绍一个css开发框架compass

什么是compass?

compass基于sass,是一个真正意义上的编程框架,提供了大量的mixin(可理解为函数库),无论是对css3繁杂的多浏览器写法的简化支持,还是实现各种常见功能的helper,都是强大而丰富的。

为什么要使用compass?

在Web开发的过程中,使用CSS的是很普遍的,虽然CSS本身并不复杂,但在大型网站中如何去有序地组织好CSS结构却是一个相当棘手的问题。为了解决开发者的这些问题,就有了Sass的出现。Sass 的全称是 (Syntactically Awesome Stylesheets),是一种输出CSS的meta编程语言, 可以帮助开发者写出复用性更优的CSS文件: 它能将类似CSS但是更简便的书写的sass语言最终转换为CSS代码。

compass开发框架语法特征

变量: 

Sass中以”$”号打头的$name都是变量。我们可以给变量赋值,然后在文件中使用它们。

继承:
  1. A、继承其它选择器的属性:.error {border: 1px}; .subError {@extend .error};
  2. B、在选择器中属性插入”&”它就会继承父选择器:a: {color:black; &:hover {color:blue}}
内嵌:

这个功能将另外一个急需的特性加入CSS:将选择器嵌入到其他等级,而不是不得不取消在一些高级选择器定义中嵌套。Sass翻译器将这个简洁的特性扩展到了CSS。

混合类型:允许开发者抽象出性质的共同点,然后命名并且加入到选择器中。熟悉Ruby混合类型的开发者会了解混合类型在CSS中的应用。Sass也允许将混合类型作为参数,使得混合类型的应用更加灵活。

操作:

Sass支持简单的算术操作,例如+-×/,以及函数。将这个特性和变量结合起来,会使得CSS变得更加灵活。工具需要保证操作的单位(px, pt)正确性(例如字体大小等, width: 1in + 8pt,将某颜色亮度增加10%: lighten(yellow, 10%))。

Sass语言支持的函数列表在这里: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html