Sass學習

1.1下載地址：

　　http://rubyinstaller.org/downloads

2.1 安裝

SASS是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，而後再安裝SASS。

假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：

　　gem install sass

而後，就能夠使用了。

2.2 使用

SASS文件就是普通的文本文件，裏面能夠直接使用CSS語法。文件後綴名是.scss，意思爲Sassy CSS。

下面的命令，能夠在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲test。）

　　sass test.scss

若是要將顯示結果保存成文件，後面再跟一個.css文件名。

　　sass test.scss test.css

SASS提供四個編譯風格的選項：

　　* nested：嵌套縮進的css代碼，它是默認值。

　　* expanded：沒有縮進的、擴展的css代碼。

　　* compact：簡潔格式的css代碼。

　　* compressed：壓縮後的css代碼。

生產環境當中，通常使用最後一個選項。

　　sass --style compressed test.sass test.css

你也能夠讓SASS監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。

　　// watch a file

　　sass --watch input.scss:output.css

　　// watch a directory

　　sass --watch app/sass:public/stylesheets

SASS的官方網站，提供了一個在線轉換器。你能夠在那裏，試運行下面的各類例子。

3、基本用法

 變量

SASS容許使用變量，全部變量以$開頭。

Sass源代碼：

$blue:#1875e7;
div{
  color:$blue;
  }
  
  $side:left;
  /*asassdf*/
  .rounded{
    .round{
      border-#{$side}-radius:5px;
    }
    
  }
  
  /*計算能力*/
  $var:2;
  body{
    margin: (14px/2);
    top:50px + 100px;
    right:$var * 20%;
  }
  
  /*嵌套*/
  div h1{
    color:red;
  }
  
  /*也能夠寫成這樣*/
  /*屬性的嵌套必需要在屬性後成加上冒號*/
  p{
    border:{
      color:red;
      
    }
  }
  /*關於註釋：
    又斜槓是在css文件中是不顯示的；
    C++方式註釋的方法會留在CSS文件中；
  */
  
  /*繼承*/
  .class1{
    margin:0 auto;
    border:1px solid #000;
  }
  .class2{
    @extend .class1;
    font-size:120%;
  }


/*Mixin 宏的使用*/
@mixin left{  //定義mixin宏
  float:left;
  margin-left:10px;
}

div{
  @include left;  //@include 用於引用minxin宏；
  
}

/*帶參數的minxin宏*/
@mixin left($value:20px){
  float:left;
  margin-right:$value;
}
  
//使用帶參數的mixin宏；
div{
  @include left(40px);
  
}
  
  
/*Sass高級語法*/
//@if 語句的使用；
p{
  @if 1 + 1 == 2{
    border:1px solid #000;
  }
  
  @if 3 < 2{
    border:2px solid #fff;
    
  }
}
//@else 語句的使用；
/*
@function linghtness($value){
  @return $value;
}
$color:20%;
@if linghtness($color) > 30%{
  background-color:#000;
}@else{
  background-color:#fff;
}*/

//for 語句的使用；
 @for $i from 1 to 5  {
   .itme-#{$i} {width:100px; height:100px; }
 }
 
 //while語句
 
 $i:6;
 
 @while $i > 0 {
   .itme-#{$i} {width: 2em * $i;}
   $i:$i - 2;
   
 }
 
 //each命令
 @each $member in a, b, c, d, f{
 
 .#{$member}{
    background-image:url("../images/#{$member}.jpg");
 }
 }

對應生成的CSS文件：

@charset "UTF-8";
div {
  color: #1875e7;
}

/*asassdf*/
.rounded .round {
  border-left-radius: 5px;
}

/*計算能力*/
body {
  margin: 7px;
  top: 150px;
  right: 40%;
}

/*嵌套*/
div h1 {
  color: red;
}

/*也能夠寫成這樣*/
/*屬性的嵌套必需要在屬性後成加上冒號*/
p {
  border-color: red;
}

/*關於註釋：
  又斜槓是在css文件中是不顯示的；
  C++方式註釋的方法會留在CSS文件中；
*/
/*繼承*/
.class1, .class2 {
  margin: 0 auto;
  border: 1px solid #000;
}

.class2 {
  font-size: 120%;
}

/*Mixin 宏的使用*/
div {
  float: left;
  margin-left: 10px;
}

/*帶參數的minxin宏*/
div {
  float: left;
  margin-right: 40px;
}

/*Sass高級語法*/
p {
  border: 1px solid #000;
}

/*
@function linghtness($value){
  @return $value;
}
$color:20%;
@if linghtness($color) > 30%{
  background-color:#000;
}@else{
  background-color:#fff;
}*/
.itme-1 {
  width: 100px;
  height: 100px;
}

.itme-2 {
  width: 100px;
  height: 100px;
}

.itme-3 {
  width: 100px;
  height: 100px;
}

.itme-4 {
  width: 100px;
  height: 100px;
}

.itme-6 {
  width: 12em;
}

.itme-4 {
  width: 8em;
}

.itme-2 {
  width: 4em;
}

.a {
  background-image: url("../images/a.jpg");
}

.b {
  background-image: url("../images/b.jpg");
}

.c {
  background-image: url("../images/c.jpg");
}

.d {
  background-image: url("../images/d.jpg");
}

.f {
  background-image: url("../images/f.jpg");
}