SASS参考文档（写作中）

时间：2014-02-28 13:57:32 收藏：0 阅读：502

SASS是最早、最成熟的CSS预处理，它可以通过变量、嵌套、函数、继承等使CSS变得更加强大，更加优雅，而且完全兼容CSS的语法。SASS可以帮助我们更好地组织大CSS文件，更加便捷地开发和运行CSS文件，在类似Compass的类库的帮助下，我们将更加如虎添翼。

1.特性

完全兼容CSS3
诸如变量、嵌套、混合（Mixins）之类的语言扩展
操作颜色和其他的巨量实用函数
类似控制语句的强大特性
可以自定义的、格式良好的输出
整合Firebug

2.语法

SASS可以允许有两种语法，一种叫做SCSS(Sassy CSS),使用.scss作为扩展名，它继承了CSS3的语法，一个验证合格的CSS样式表同样也是一个完全合格的SCSS样式表，同时具备相同的含义，而且SCSS能很好的识别大部分的CSS Hacks、浏览器厂商语法（例如老版本IE的滤镜）。

另一种是比较早的语法，我们叫做缩进语法(使用.SASS作为扩展名，有时叫做SASS)提供了一种简洁书写CSS的语法，使用缩进而不是括号来代表嵌套，使用新行而不是分号分割属性，书写容易、代码简洁是很多人的最爱。

当然说了这么多，到底区别有哪些，我们通过一个简单地例子直观地看一下。

//使用SCSS
$baseFontsize:14px;
$Largefontsize:16px;

body{
	font-size:$baseFontsize;
	p{
		font-size:$Largefontsize;
	}
}

//使用SASS
$baseFontsize: 14px
$Largefontsize: 16px

body
  font-size: $baseFontsize
  p
    font-size: $Largefontsize

两种语法各有所长，也各有所爱。SCSS好在贴近CSS，SASS妙在简洁清爽，大家可以参考下这篇文章《Sass vs. SCSS: which syntax is better?》，至于你选择那种语法，就全在你了。

SASS提供了两种语法的转换功能，代码貌似下面

# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass

3.使用SASS

SASS基于Ruby来实现，所以说你得有Ruby，Mac里面内嵌了Ruby，Windows需要安装，大家可以到官方下载安装。

通过以下命令安装 Sass Ruby gem： gem install sass。

具体安装过程大家可以参考W3Cplus上的教程。

比较好的编译工具compass.app、Scout、Codekit、Koala等。

4.CSS扩展

4.1嵌套

SASS允许使用嵌套来减少父对象的重复，同时提高代码的可读性。

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

上面的这段嵌套的代码编译过之后，将会是这样

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

4.2父选择器引用&

在嵌套代码中使用父对象的引用有的时候是非常有用而且必要的，例如，当你给hover状态指定样式，或是给有特定类的body元素指定样式时，使用&引用父对象将会很高效。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译之后的代码如下所示

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

&将会在原地替换成父对象选择器，这个在深度嵌套中非常有用，例如

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

将会被编译成

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

4.3属性嵌套

CSS里面有一些属性具有命名空间，例如font-family，font-size，font-weight等都在font的命名空间内，在CSS里如果你想声明一大堆这样的相同命名空间的属性，你需要一个个地重复写出来。SASS提供了一个解决方法，你只需要写一遍命名空间，然后将子属性嵌套进去就可以，例如

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译出来之后

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

并且，命名空间属性还可以有一个值，像下面的代码一样

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译之后

.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

4.4占位符选择器 %foo

SASS提供了一种特殊的选择器，叫做占位符选择器，看起来类似于ID与Class选择器（#id或.class），但是只在继承指令（Extend）里有用，大家可以到下面的Extend部分获得详细信息。

如果你在没有继承的环境中，使用占位符选择器的规则讲不会被渲染。

5.注释

SASS支持多行注释/**/和单行注释//两种注释风格，不过在编译成CSS时，多行注释保留，单行注释会被过滤掉。

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won‘t appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

编译之后

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

当注释的第一个字符为！时，注释将会插值的形式编译到css中，甚至在压缩输出时也是如此，这个特性对于在CSS中添加版权信息非常有用。

6.SassScript

对于CSS属性语法来说，SASS提供了一个叫做SASSScript的扩展集，允许在属性中使用变量、运算和函数。

SassScript 同样可以用来生成选择器和属性名称，这个在Minxin中很有用，大家可以在插值部分获取详情。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

SASS参考文档（写作中）,布布扣,bubuko.com

原文：http://blog.csdn.net/whqet/article/details/20049375