Sass 筆記

Sass 筆記

1. 安裝，依賴Ruby

　　sass依賴Ruby, 因此Windows要先安裝Ruby, Mac自帶無需安裝

　　

$ gem install sass

　　

2. 兩種文件格式 sass scss

　　.sass : 它使用 「縮進」 代替 「花括號」 表示屬性屬於某個選擇器，用 「換行」 代替 「分號」 分隔屬性, 容易閱讀 書寫更快

　　.scss : CSS3 語法寫法相同

　　兩者可互相轉換： 

$ sass-convert style.sass style.scss

　　

3. 緩存

　　提高從新編譯的速度

　　在 .sass_cache 文件夾中

　　禁用緩存  :cache 設置爲 false

 

4. 具體語法

　　1. 變量

　　　　 $highlight-color  好比建立一個文件用來存放全部color變量

　　2. 嵌套 

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

　　　　a. & 替換父元素

　　　　b. 羣組選擇器

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

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

　　　　c. ～ 同層全體組合選擇器， 

　　　　    + 同層相鄰組合選擇器, 選取元素後緊跟的其餘元素

　　　　d. 嵌套屬性

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

　　3. 導入SASS文件

 　　會導入 themes/_night-sky.scss文件
　　　　b. 用於變量，含義是：若是這個變量被聲明賦值了，那就用它聲明的值，不然就用這個默認值。　　　　a. @import"themes/night-sky";!default

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

　　　　c. 導入css文件， 把原始的css文件更名爲.scss後綴，便可直接導入了

　　　　d. 若是須要導入 SCSS 或者 Sass 文件，但又不但願將其編譯爲 CSS，只須要在文件名前添加下劃線，這樣會告訴 Sass 不要編譯這些文件，但導入語句中卻不須要添加下劃線。

　　4. 註釋　　

body {
  color: #333; // 這種註釋內容不會出如今生成的css文件中， 靜默註釋
  padding: 0; /* 這種註釋內容會出如今生成的css文件中 */
}

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

　　

　　5. 混合器

　　　　經過sass的 @mixin 實現大段樣式的重用。@include 引用。容許傳參數。 判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你可否爲這個混合器想出一個好的名字。

　　

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

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



@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

　　

　　

　　

　　6. 繼承 

　　　　@extend 告訴 Sass 將一個選擇器下的全部樣式繼承給另外一個選擇器。實現樣式的組合。明確各個樣式之間的關係。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

編譯成

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

　　7.Debug

@debug 10em + 12em;

@warn "Assuming #{$x} to be in pixels";

@error "$x may not be unitless, was #{$x}.";

　　

　　8.控制指令

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}


@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}


@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

　　

　　

　　9.函數 

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }