Sass基础

http://www.sasschina.com/guide/
http://www.ruanyifeng.com/blo...

变量声明($)

$highlight-color: #F90;
{ }规则块内定义，只能在{}规则块内使用
$link-color和$link_color指向的是同一个变量

嵌套CSS 规则(&)

 &:hover { color: red }

群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

嵌套属性

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

导入SASS文件(@import)

@import"sidebar";
_night-sky.scss  #局部文件的文件名以下划线开头，不会在编译时单独编译这个文件输出css
@import "themes/night-sky"; 

默认变量值(!default)

$fancybox-width: 400px !default;

嵌套导入(@import)

.blue-theme {@import "blue-theme"}

静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合器(@mixin)

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  border: 2px solid #00aa00;
  @include rounded-corners;
}
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

给混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

默认参数值

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

使用选择器继承来精简CSS(@extend)

.error {
  border: 1px red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

@mixin

@mixin awesome {
    width: 100%;
    height: 100%;
}

body {
    @include awesome;
}
p {
    @include awesome;
}

@mixin awesome($w: 100%, $h: 100%) {
    width: $w;
    height: $h;
}

body {
    @include awesome(960px);
}
p {
    @include awesome;
}

@mixin radius($radius){
    border-radius: $radius;
}
.navigation {
    @include radius(10px);
}
.content {
    @include radius(32px);
}

@extend

.awesome {
    width: 100%;
    height: 100%;
}

body {
    @extend .awesome;
}
p {
    @extend .awesome;
}
/*
.awesome, body, p {
    width: 100%;
    height: 100%;
}
*/

占位符(%)

%awesome {
    width: 100%;
    height: 100%;
}
body {
    @extend %awesome;
}
p {
    @extend %awesome;
}
/*
body, p {
    width: 100%;
    height: 100%;
}
*/