0%

sass

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

它的语法特性

  1. 变量: Sass中以”$”号打头的$name 都是变量。我们可以给变量赋值,然后在文件中使用它们。
  2. 继承:
     A. 继承其它选择器的属性:.error {border: 1px}; .badError {@extend .error};
     B. 在选择器中属性插入”&”它就会继承父选择器:a: {color:black; &:hover {color:blue}}
  3. 内嵌 :这个功能将另外一个急需的特性加入CSS:将选择器嵌入到其他等级,而不是不得不取消在一些高级选择器定义中嵌套。Sass翻译器将这个简洁的特性扩展到了CSS。
  4. 混合类型 :允许开发者抽象出性质的共同点,然后命名并且加入到选择器中。熟悉Ruby混合类型的开发者会了解混合类型在CSS中的应用。Sass也允许将混合类型作为参数,使得混合类型的应用更加灵活。
  5. 操作 :Sass支持简单的算术操作,例如±×/,以及函数。将这个特性和变量结合起来,会使得CSS变得更加灵活。工具需要保证操作的单位(px, pt)正确性(例如字体大小等, width: 1in + 8pt,将某颜色亮度增加10%: lighten(yellow, 10%))。

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

阅读全文 »