sass入门（一）

一. $声明变量

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

//编译后

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

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

//编译后

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

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; //在声明变量时，变量值也可以引用其他变量
.selected {
  border: $highlight-border;
}

//编译后

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

$link-color: blue;
a {
  color: $link_color; //$link-color和$link_color其实指向的是同一个变量。实际上，在sass的大 多数地方，中划线命名的内容和下划线命名的内容是互通的
}

//编译后

a {
  color: blue;
}

二. 嵌套css规则
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

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

#content {
  background-color: #f5f5f5;
  aside { background-color: #eee }
}
//容器元素的样式规则会被单独抽离出来，而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }

例外：在嵌套的选择器里边立刻应用一个类似于：hover的伪类，sass提供了一个特殊结构&

article a {
  color: blue;
  &:hover { color: red }
}
//编译成：
article a { color: blue }
article a:hover { color: red }

#content aside {
  color: red;
  body.ie & { color: green } //通过JavaScript在标签上添加一个ie的类名
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
/*编译为：*/
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; 
   }

群组选择器：

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

nav, aside {
  a {color: blue}
}
//编译成：
nav a, aside a {color: blue}

子组合选择器和同层组合选择器：>、+和~：

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

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