sass学习笔记（1）

1.使用变量

sass 使用 $ 符号来标识变量，在CSS中并无他用，不会导致与现存或未来的css语法冲突。

2.变量的声明

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中(如@media或者@font-face块)，情况也是如此:

$nav-color: #333;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #333;
}

可以发现\(nav-color 这个变量定义在了规则外边，所以在这个样式表中都可以像nav规则块那样引用它，而\)width 则定义在了nav{ }内，所以只能nav规则使用，这就意味着我们可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

3.变量的引用

$highlight-color: #F90;
$highlight-border: 1px solid $highlight_color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

可以看到在声明变量时，变量值可以引用其他变量，当你通过粒度区分，为不同的值取不同的名字时，这相当有用。

4.变量名用中划线还是下划线分割是一样的

\(highlight_color和\)highlight_color其实指向的是同一个变量。实际上，在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。

5.嵌套CSS规则

防止css中重复写选择器，我们可以使用sass中的嵌套规则。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }