SASS 例子

原文链接: SASS 例子

上一篇: SCSS/SASS 入门

下一篇: SASS 导入

变量嵌套引用。在声明变量时，变量值也可以引用其他变量。

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

//编译后

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

sass 的变量名可以与 css 中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词（如 $highlight-color ），而有些人喜欢使用下划线（如 $highlight_color ）。使用中划线的方式更为普遍，这也是 compass 和本文都用的方式。

不过， sass 并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使 compass 选择用中划线的命名方式，这并不影响你在使用 compass 的样式中用下划线的命名方式进行引用：

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

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

嵌套css规则

#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 }

父选择器

一般情况下， sass 在解开一个嵌套规则时就会把父选择器（ #content ）通过一个空格连接到子选择器的前边（ article 和 aside ）形成（ #content article 和 #content aside ）。这种在CSS里边被称为后代选择器，因为它选择ID为 content 的元素内所有命中选择器 article 和 aside 的元素。但在有些情况下你却不会希望 sass 使用这种后代选择器的方式生成这种连接。

最常见的一种情况是当你为链接之类的元素写 ：hover 这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况 sass 就无法正常工作：

article a {
  color: blue;
  :hover { color: red }
}

这意味着 color: red 这条规则将会被应用到选择器 article a :hover ， article 元素内链接的所有子元素在被 hover 时都会变成红色。这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。

解决之道为使用一个特殊的 sass 选择器，即父选择器。在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的 & 符号，且可以放在任何一个选择器可出现的地方，比如 h1 放在哪，它就可以放在哪。

article a {
  color: blue;
  &:hover { color: red }
}

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是 & 被父选择器直接替换：

article a { color: blue }
article a:hover { color: red }

群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

.container h1, .container h2, .container h3 { margin-bottom: .8em }

nav, aside {
  a {color: blue}
}

首先 sass 将 nav 和 a aside 和 a 分别组合，然后将二者重新组合成一个群组选择器：

nav a, aside a {color: blue}

子组和同层选择器

你可以用同层相邻组合选择器 + 选择 header 元素后紧跟的 p 元素：

header + p { font-size: 1.1em }

你也可以用同层全体组合选择器 ~ ，选择所有跟在 article 后的同层 article 元素，不管它们之间隔了多少其他元素：

article ~ article { border-top: 1px dashed #ccc }

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass 会如你所愿地将这些嵌套规则一一解开组合在一起：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

属性嵌套

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个 { } 块，把子属性部分写在这个 { } 块中。

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}