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%;
}
*/