Sass 语法规则

首先，sass和scss使用同一种语法，可是写法有所不一样。
sass在编写的时候不适用' { '和' } '来包括，每一句的末尾也不能够用' ; '来结束。
而scss则彻底能够按照css的写法编写，本篇基本使用sass的写法。

1 变量

1-1 变量声明

在sass中可使用$来定义变量

//变量定义
$font-color: #333
$highlight-color: #F90

//变量引用
header 
  $width: 100px
  width: $width
  color: $font-color

在sass中，中划线和下划线均可以使用，如：

$link-color: blur
a
  color: $link_color

2 嵌套

2-1 基本嵌套

在sass中，须要在在父级中写入不少子级的不一样属性，可使用嵌套。
嵌套在sass中显示可能看不明白，本节附带scss语句。

// sass 语句
.contanin
  article
    h1 color: #333
    p margin-bottom: 1.4rem
  aside
    background-color: #abc

// scss 语句
.contanin {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4rem }
  }
  aside {
    background-color: #abc
  }
}

// 编译后
.contanin article h1 { color: #333 }
.contanin article p { margin-bottom: 1.4rem }
.contanin aside { background-color: #abc }

2-2 父选择器的标识符：&

当想要经过嵌套给父级元素设置伪类事件时，若是咱们这样写：

// scss语句
article a {
  color: blue;
  :hover { color: red }
}

这样的结果是给article中a连接的全部后代添加了hover事件，这确定不是咱们想要的结果；这时可使用 & 来获取父级，如：

// scss语句
article a {
  color: blue;
  &:hover { color: red }
}

这样就能够实现给article中的a连接设置hover事件
还有一种状况，须要给父选择器以前添加选择器时，能够直接在 & 前面加上选择器，如

// scss语句
#content aside {
  color: red;
  .main & { color: green }
}

// 编译后
#content aside {color: red};
.main #content aside { color: green }

2-3 群组选择器的嵌套

// sass语句
.container 
  h1, h2, h3 
    margin-bottom: .8em

// 编译后
.container h1, .container h2, .container h3 {
  margin-bottom: .8em 
}

2-4 多种选择器：> 、+ 、~

> :子代选择器，能够选择一个元素的子元素，而不是后代元素
+ :同层相邻选择器，能够获取一个元素后紧跟的一个元素
~ :同层全体组合选择器，能够获取一个元素同层的全部所选元素

2-5 嵌套属性

// sass语句
nav 
  border: 
  style: solid
  width: 1px
  color: #ccc

// 编译后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

感受并非很实用，像border,background,translate这些彻底能够将全部属性以此写在后面。。

3 导入sass

在sass中能够经过@import "reset"来导入reset.sass文件

3-1 用sass中的部分文件

在sass中有些sass文件你可能并不想将其转化成css文件，只是为了用于其余地方导入，这时你就能够经过在文件名的前面加一个下划线_来标记。并且导入的时候能够省略下划线。
如：想导入_reset.sass文件时，能够在想要导入的位置写@import "reset";而且导入的文件种的变量均可以被使用。

3-2 默认变量值

一般在预设样式中均可以使用!default来设置默认样式，可是!default用于变量，含义：若是这个扁郎被声明赋值了，那就用它声明的值，不然就用这个默认值。

// sass语句
$color: #333 !default

3-3 嵌套导入

导入一个sass的局部文件，也能够嵌套在一个选择器中导入，如

// sass语句
.aside
  @import "reset"

这样的导入，reset.sass中的变量的做用域就只有在.aside中才有效。

4 混合器mixin

4-1 混合器的定义与调用

混合器通俗来讲就是将一大段样式赋予一个名字，须要的时候只需调用这个名字便可（用于浏览器兼容处理上很方便）

// sass语句
// 定义
@mixin rounded-corners 
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

// 调用
notice 
  background-color: green
  border: 2px solid #00aa00
  @include rounded-corners

4-2 混合器中的css规则

混合器中一样能够包含选择器和选择器中的属性。
混合器中也可使用sass的父选择器标识符&。
若是一个混合器只包含css规则，不包含属性，那么该混合器就能够在文档的顶部调用，用于全局。

4-3 混合器传参

能够看出，混合器和函数很像，须要定义，也能够调用，如今又说能够传参！！

// sass语句
// 混合器定义
@mixin link-colors($normal, $hover, $visited) 
  color: $normal
  &:hover 
    color: $hover
  &:visited
    color: $visited

// 混合器调用
a 
  @include link-colors(blue, red, green)

// 编译后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

5 选择器继承

5-1 选择器继承

// sass语句
.error 
  border: 1px solid red
  background-color: #fdd

.seriousError 
  @extend .error
  border-width: 3px

这样.seriousError就有了.error的全部属性

5-2 组合选择器的继承

// sass语句

//应用到.seriousError a
.error a  
  color: red
  font-weight: 100

//应用到hl.seriousError
h1.error  
  font-size: 1.2rem

.seriousError 
  @extend .error
  border-width: 3px

.seriousError不只会继承.error自身的全部样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

6 注释

在css中，咱们一般是用/ ... /来注释，这样的注释被解析出来还会出如今css文件中。

在sass中，可使用 // 开头的注释来进行静默注释，这样的注释内容不会出如今生成的css文件中。