SASS入门

1、CSS预处理器

• 定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。
• CSS预处理器语言: scss (sass) . LESS等;

 2、特色功能

• 完全兼容 CSS3
• 在CSS基础上增加变量、嵌套（nesting）、混合（mixins）等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令（control directives）等高级功能
• 自定义输出格式

3、声明变量 

变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;

 直接使用即调用变量：

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}

编译为:

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

 4、嵌套规则

Sass 允许将一套CSS样式嵌套进另—套样式中，内层的样式将它外层的选择器作为父选择器嵌套功能避免了重复输入父选择器，而且令复杂的CSS结构更易于管理，例如:

#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

编译为：

#main {
  width: 97%;
}
#main p, #main div {
  font-size: 2em;
}
#main p a, #main div a {
  font-weight: bold;
}
#main pre {
  font-size: 3em;
}

4.1 父选择器 &

当给某个元素设定hover样式时,可以用&代表嵌套规则外层的父选择器。

编译后的CSS文件中&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层—层向下传递:

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

编译为：

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

4.2 属性嵌套

有些CSS属性遵循相同的命名空间(namespace)，比如font-family , font-size ,font-weight都以font作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如:

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

 编译为：

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

5、注释

Sass支持标准的CSS多行注释/**l，以及单行注释//

1.*这种注释在文件编译后可以保留*

2.//  这种注释在文件编译后不可以保留