sass

sass入門
1.下載安裝koala工具，安裝後，output style選擇 'compressed' 壓縮生成的css
2.項目中新建sass文件夾，存放全部.scss文件
3.把sass文件夾拖到koala，保存.scss文件後，會生成與sass文件夾同級的css文件夾，並生成編譯後的css文件
4.官方文檔 https://www.sass.hk/
5.koala 教程 http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

 變量、混合器、繼承

a.scss

@charset "utf-8";
@import "test"; // 引入 _test.scss文件，可省略後綴和下劃線   下劃線表示，該文件是部分文件，編譯時不生成相應的css文件
$nav-color: #f00; // 該註釋編譯時會被忽略， 推薦中劃線變量，
// sass中  $nav-color 和 $nav_color 中劃線命名的內容和下劃線命名的內容是互通的，除了變量，也包括對混合器和Sass函數的命名。
.a {
  $width: 100px; /* 該註釋編譯時會保留， 局部變量 */
  width: $width;
  color: $nav-color;
  height: 100px;
  border: {
    style: solid; // 屬性能夠這樣寫，【生成的樣式變多了】，也能夠  boder:1px solid red;
    width: 1px;
    color: #ccc;
  }
}

//2.基本嵌套,跟 less 同樣
.b {
  border: 1px solid green;
  .c {
    color: red;
    font-size: 20px;
  }
}

// 3 父元素標識符  &
.d a {
  color: blue;
  &:hover {
    color: black;
  }
  body.ie & { // 能夠更換順序  最終生成   body.ie .d a{color:red;}
    color: red;
  }
}

// 4 羣組選擇器的嵌套，【生成的樣式變多了】（少用）  + > ~ 少用
.container {
  h1, h2, h3 { // 少用
    margin-bottom: 2px;
  }
}

.nav, aside {
  a { // 少用
    color: blue;
  }
}

// 5 boder屬性
.e {
  border: 1px solid #4caf50 {
    left: 3px;
    right: 5px;
  }
}

// 6 導入 sass 文件，   .ff{@import 'test'}  少用
// 引入.css文件，要把 .css改成 .scss
.f {
  $my-color: pink;
  color: $my-color;
}

// 混合器 複製樣式
@mixin rounded-corners {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.g {
  border: 1px solid green;
  @include rounded-corners // 引入混合器
}
.h{
  font-size: 30px;
  @include rounded-corners
}

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

.h {
  a {
    @include link-color(   //  按順序傳參  @include link-color(blue,green,red)
    $normal:blue,   // 可亂序以對象形式傳參
    $visited:red,
    $hover:green
    )
  }
}
// 選擇器繼承   【生成的樣式變多了】，只要  <div class="serious-error">sssss</div>  就包括.error的樣式了
.error{
  border:1px solid red;
}
.serious-error{
  @extend .error;
  font-size: 20px;
}

 _test.scss

@charset "utf-8";  // 添加utf-8 註釋纔不會報錯
$my-color:yellow !default; // 添加默認值，其餘文件引用後，若是再定義，則用新值，沒定義則用默認值

 b.scss

@charset "utf-8";
$version: '1.0'; // 添加版本號，注意寫法    #{} 把變量包起來
/* this is version #{$version}*/
.main {
  color: black;
  &-siderbar { // & 拼接樣式名
    border: 1px solid red;
  }
}

// 局部變量轉換爲全局變量
.a {
  $width: 5px !global; // 轉成全局變量
  width: $width;
}

.b {
  width: $width;
}

// sassScript
// string    生成   .firefox .header:before{ ...}
@mixin message($selector) {
  .firefox #{$selector}:before {
    content: 'hi,firefox'
  }
}

@include message('.header');
//  運算
.c {
  $width: 100px;
  width: $width*2;
  height: (100px/3);
  border: 1px solid green;
}

.hoverlink {
  @extend a:hover; // extend有各類複雜的用法，見文檔
}

a:hover {
  text-decoration: underline;
}

// @if
$type: monster; //  if .. else ..
.d {
  @if $type== monster {
    color: red;
  } @else {
    color: black;
  }
}

// @for
@for $i from 1 through 3 { // for循環 。。。
  .item-#{$i} {
    width: 2px*$i;
  }
}

// #each
@each $animal in img1, img2, img3, img4 { // 批量生成樣式
  .#{$animal}-icon {
    background-image: url("../images/#{$animal}.png");
  }
}

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

@mixin my-border($width,$color:blue) { //有默認值的參數必須放在最後   @mixin my-border($color:blue,$width)  就報錯
  border: {
    width: $width;
    color: $color;
    style: solid;
  }
}

.h {
  @include my-border(2px, green)
}

.i {
  @include my-border($color: red, $width: 33px)
}

@mixin my-boxshadow($shadows...) { // ...
  -webkit-box-shadow: $shadows;
  -moz-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include my-boxshadow(0px 4px 5px #666)
}

// 函數指令
$grid-width: 40px;
$gutter-width: 10px;
@function get-width($n) {
  @return $n*$grid-width+($n - 1) * $gutter-width;
}

.k {
  width: get-width(5)
}

 compass是sass的工具庫，koala內置compass,須要添加config.rb文件，  添加後，把包含sass文件夾和config.rb的父文件夾從新拉到koala中，config.rb配置文件就生效了

config.rb配置詳解   http://www.sassplus.com/sass/152.html       谷歌f十二、再按f1有其餘配置

require 'compass/import-once/activate'
# 防止引入重複文件
# Require any additional compass plugins here.

# cache = false
# 刪除緩存文件  .sass-cache
sourcemap = true
# chrome 調試 scss

# Set this to the root of your project when deployed:
# 文件目錄
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"

# output_style = :expanded or :nested or :compact or :compressed
# 編譯後的css的顯示形式
output_style = :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# compass生成精靈圖時路徑不對， relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# 取消編譯後的css註釋（nested模式有一大堆註釋）， line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass