SASS的安裝及使用（前提：安裝Ruby）

本文僅適用於Windows系統。

 

一、安裝Ruby

　　Sass是用Ruby語言寫的，但是兩者的語法沒有關系，所以學 Sass 不用學 Ruby，只是必須先安裝Ruby，然后再安裝Sass。

　　Linux和Mac已自帶Ruby，不用再安裝。Windows用戶可以從這里下載Ruby的安裝程序。

　　我下載的是第二個，Ruby 2.3.1 (x64)

　　安裝過程沒什么麻煩的地方，按提示來就可以。

　　

 

二、安裝SASS

　　進入運行cmd進入命令提示符，輸入ruby -v查看版本號，如果能正確顯示版本號，則說明ruby安裝成功。

　　
　　然后輸入gem install sass進行安裝。

　　可能會出現下圖（提示Could not find a valid gem 'sass'）的情況，可以參考這篇文章解決。

　　

　　正常情況下顯示的結果是這樣的：

　　

　　

三、使用SASS

　　要編譯的scss文件（mystyle.scss）如下：

$anime-time: 8s;

$box-size: 350px;
$clip-distance: .05;
$clip-size: $box-size * (1 + $clip-distance * 2);
$path-width: 2px;

$main-color: #5FB9D5;

$codepen-logo-path: url('//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png');

%full-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  @extend %full-fill;
  width: $box-size;
  height: $box-size;
  margin: auto;
  background: $codepen-logo-path no-repeat 50% / 70% rgba(#000, .1);
  color: $main-color;
  box-shadow: inset 0 0 0 1px rgba($main-color, .5);

  &::before,
  &::after {
    @extend %full-fill;
    content: '';
    z-index: -1;
    margin: -1 * $clip-distance * 100%;
    box-shadow: inset 0 0 0 $path-width; 
    animation: clipMe $anime-time linear infinite;
  }

  &::before {
    animation-delay: $anime-time * -.5;
  }

  // for debug
  &:hover {
    &::after,
    &::before {
      background-color: rgba(#f00, .3);
    }
  }

}

@keyframes clipMe {
  0%, 100% {clip: rect(0px, $clip-size, $path-width, 0px); }
  25% {clip: rect(0px, $path-width, $clip-size, 0px); }
  50% {clip: rect($clip-size - $path-width, $clip-size, $clip-size, 0px); }
  75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - $path-width); }
}

/////

html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

　　進入需要編譯的scss所在的目錄，執行sass style.scss style.css

　　　

　　之后可在該目錄獲得編譯后的css文件以及css.map文件。

　　

　　scss文件相當於源文件，css相當於編譯后的文件，當檢查到頁面問題的時候，看到的是css，但是需要修改的是scss文件，這個css.map就是兩個文件的對應關系表。

　　

 

參考資料：

http://www.sass-zh.com/

http://www.haorooms.com/post/sass_css