sass安裝 使用

一 什么是sass

     sass是一種css開發工具。提供了很多便利的寫法，使得css開發變得簡單  易維護

       sass有兩種后綴名文件：一種后綴名為sass，不使用大括號和分號；另一種就是我們這里使用的scss文件，這種和我們平時寫的css文件格式差不多，使用大括號和分號，所以一般都是用第二種寫法

二 官網

     ： http://sass-lang.com/documentation/file.SASS_REFERENCE.html

     阮一峰博客（sass部分）： http://www.ruanyifeng.com/blog/2012/06/sass.html

 

三 ruby安裝

因為sass依賴於ruby環境，所以裝sass之前先確認裝了ruby。先導官網下載個ruby

在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，不然以后使用編譯軟件的時候會提示找不到ruby環境

     

四 sass安裝

          

然后直接在命令行中輸入

gem install sass

　　

按回車鍵確認，等待一段時間就會提示你sass安裝成功。最近因為牆的比較厲害，如果你沒有安裝成功，那么請參考下面的淘寶的RubyGems鏡像安裝sass，如果成功則忽略。

如果要安裝beta版本的，可以在命令行中輸入

gem install sass --pre

　　

你還可以從sass的Git repository來安裝，git的命令行為

git clone git://github.com/nex3/sass.git
cd sass
rake install

　　

升級sass版本的命令行為

gem update sass

　　

查看sass版本的命令行為

sass -v

　　

你也可以運行幫助命令行來查看你需要的命令

sass -h

　　

淘寶RubyGems鏡像安裝  sass

由於國內網絡原因，導致 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性連接失敗。這時候我們可以通過 gem sources命令來配置源，先移除默認的 https://rubygems.org源，然后添加淘寶的源 https://ruby.taobao.org/，然后查看下當前使用的源是哪個，如果是淘寶的，則表示可以輸入sass安裝命令 gem install sass了，關於常用gem source命令可參看： 常用的gem source

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***




https://ruby.taobao.org
# 請確保只有 ruby.taobao.org
$ gem install sass

 

淘寶鏡像也不好用了

 gem sources --remove https://rubygems.org/
 gem sources -a  http://gems.ruby-china.org/
 gem sources -l

 

五 使用   

sass文件就是普通的文本文件   里面可以直接使用css語法。后綴名為 .scss     （Sassy  css）

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

                         

 sass test.scss

　

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

          sass test.scss test.css

     sass 提供4種編譯風格的選項

                         nested  嵌套縮進的css代碼。是默認值

                         expanded  沒有縮進 擴展的css代碼

                         compact  簡潔格式的css代碼

                         compressed  壓縮后的css代碼

                         

                         生產環境中，一般使用最后一個選項：  sass --style compressed test.scss test.css

      sass官方的在線轉換器：http://www.sassmeister.com/

               sass 也可以監聽文件，一旦文件被改動，就自動生成編輯后的版本

                      

   sass --watch test.scss:test.css

　　

               監聽文件夾：

 sass --watch sassFileDirectory:cssFileDirectory

　　

 

六 基本用法

     6.1 變量(在選擇器中聲明的變量會覆蓋全局聲明的變量)

          任何可以用作css屬性值的賦值都 可以用作sass的變量值，甚至是以空格分割的多個屬性值，如$basic-border: 1px solid black;，或以逗號分割的多個屬性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;變量聲明后被引用才算生效。

         6.1.1 sass所以的變量以$開頭  變量名中的中划線和下划線相互兼容

             

 $blue:#1875e7;
  div{color:$blue;}

                        

         6.1.2 如果變量需要鑲嵌在字符串之中   就必須寫在#{}之中

            

   $left:left;
 .rounded {border-#{$left}-radius:5px;}

　　

                        

                 6.1.3 默認變量：sass的默認變量僅需要在值后面加上!default即可。 sass的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可

                    6.1.4 多值變量

                         6.1.4.1  list類型

                                    list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值

                                      

$px: 5px 6px 8px 10px;//一維數組
$pxT: 10px 20px , 30px 40px;//二維數組
$trpx:(1px solid #eee ) (16px solid #aaa);//二維數組
 
.class8 {
    font-size: nth($px,3);
}
.class9 {
    border: nth($trpx,1);
}
.class10 {
    margin: nth($pxT,2);
}

　　

                         6.1.4.2  map類型

                                     map數據以key和value成對出現，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。

                                

$headings:(h1:2em,h2:1.5em,h3:1em);
.class11 {
    font-size: map-get($headings,h2);
}
 
@each $heade , $size in $headings {
        #{$heade} {
            font-size: $size;
        }
}
 

　　

    6.2 可使用算術

        

  $var:10;
  body{margin:(14px/2);top:50px+100px;right:$var*10%;}

　　

    6.3 嵌套

          6.3.1選擇器嵌套：

          

div{
               color:$blue;
               h1 {
                   color:red;
               }
           }

　　

           6.3.2屬性嵌套：

             

p {
       border:{
                  color:red;
                   }
               }
     }

　　

                       此時   border后面的冒號必須加

          

                         6.3.3&引用父元素

                       

  a {
          &:hover {color:red;}
      }
#content aside { color: red;body.ie & { color: green }}

　　

 

 

                         6.3.4 群組選擇器的嵌套

                       

  .container { h1, h2, h3 {margin-bottom: .8em} }
 nav, aside { a {color: blue} }

　　

             6.4注釋

                         中文注釋的報錯，亂碼的問題解決：

                                    步驟：1、找到下面這個文件C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass\engine.rb      即自己的安裝目錄路徑

                                            2、找到require 'sass/supports'這一行，在下面一行添加Encoding.default_external = Encoding.find('utf-8')

 

                      

標准的CSS注釋 /* comment */ ，會保留到編譯后的文件。

單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。

在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明版權信息。

 

　

　/*! 
　　　　重要注釋！
　　*/

　　

七  代碼的重用

     7.1繼承

                 sass可以實現選擇器的繼承

                     

   .class1 {
                   border: 1px solid #ddd;
                         }
  .calss2 {
                    @extend .class1;
                      font-size: 20px;
            }

　　

                               結果截圖：

                                             

      7.2 sass代碼塊的重用

                    使用@mixin命令   定義一個代碼塊   例如下面的left

                  

  @mixin left {
                             float: left;
                             margin-left: 10px;
                    }

　　

                    使用@include命令  調用這個mixin

                       

  .class3 {
                             @include left;
                         }

　　

                    @mixin 還可以指定參數和缺省值

                       

  @mixin right($value:10px) {
                             float: right;
                             margin-right: $value;
                         }

　　

                    使用的時候，根據需要加入參數：

                            

 .class5 {
           @include right()
}

　　

如果不傳參數，就是默認值

.class4 {
    @include right(40px)
}

　　

 

          常用於：生產瀏覽器前綴

             

 @mixin rounded ($vert,$horz,$radius:10px) {
    border-#{$vert}-#{$horz}-radius:$radius;
    -moz-border-#{$vert}-#{$horz}-radius:$radius;
    -webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
.nav {
    @include rounded(top,left)
}
.footer {
    @include rounded(top,left,5px)
}

　　

多組值參數mixin

如果一個參數可以有多組值，如box-shadow、transition等，那么參數則需要在變量后加三個點表示，如 $variables...。

    

 @mixin box-shadow ($shadow...) {
    -webkit-box-shadow:$shadow;
    box-shadow: $shadow;
}

　　

@content: 使@mixin接受一整塊樣式，接受的樣式從@content開始

         

 @mixin max-screen ($res) {
    @media only screen and (max-width: $res) {
        @content;
    }
}
@include max-screen(480px) {
    body {color:red;}
}
 
              

　　

7.3 顏色函數

      

  lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

　　

 

        7.4 插入文件

                @import 命令可以插入外部文件

               scss文件：@import 'path/name.scss'

     css文件：@import 'name.css' 

 

8 高級用法

      8.1 條件語句

@if  可以用來判斷     配套的還有@else命令

    

 .class6 {
    @if 1+1 == 2 {color:red}
    @if 5 < 3 {color:blue}@else {
        background-color: #FFF
    }
}

　　

8.2循環語句

     8.2.1 for循環   for循環有兩種形式，分別為：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

           

    @for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid red;
    }
}

　　

8.2.2 while

       

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

　　

8.2.3 each 

     

@each $member in a,b,c,d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}
 

　　

8.3 自定義函數 @function  @return

    

@function double($n) {
    @return $n * 2;
}
.class7 {
    width: double(5px);
}

　　

 

           8.4 @at-root  為了跳出選擇器嵌套的。默認所以得嵌套，繼承所有上級選擇器。但有了這個就可以跳出所有上級選擇器。

  //單個選擇器跳出
.parent {
    color:red;
    @at-root .child {
        width: 100px;
    }
}
//多個選擇器跳出
.parent2 {
    color:blue;
    @at-root {
        .child1 {width: 100px;}
        .child2 {width: 200px;}
    }
}

　　

        8.4.1默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support，如果要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)

         

 //跳出父級元素嵌套
@media print {
    .parent2 {
        color: red;
        @at-root .child3 {
            color: blue;
        }
    }
}
 
//跳出media嵌套  父級有效
@media print4 {
    .parent4 {
        color: red;
        @at-root (without: media) {
            .child4 {
                width: 200px;
            }
        }
    }
}
 
//跳出media和父級
@media print5 {
    .parent5 {
        color:red;
        @at-root (without:all) {
            .child5{height: 200px;}
        }
    }
}

　　

 

8.4.2  @at-root 於 & 配合使用

.child6 {
    @at-root .parent6 & {
        height: 300px;
    }
}

　　

 

 8.4.3占位選擇器%

從sass 3.2.0以后就可以定義占位選擇器 %。這種選擇器的優勢在於：如果不調用則不會有任何多余的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然后實際應用中不管是否使用了 @extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以 %標識定義，通過 @extend調用。

   

  %ir {
    color:transparent;
    text-shadow:none;
    background-color: transparent;
    border:0;
}
%clearfix {
    @if $ie7 {
        *zoom :1;
    }
    &:before,
    &:after {
        content: "";
        display: table;
        font: 0/0;
 
    }
    &:after {
        clear: both;
    }
}
#header {
    width: 2100px;   
    @extend %ir;
}
.ir {
    @extend %ir;
}

　　

   

九 編譯          

          9.1 sublime裝SASS build插件，可以在sublime的packages文件夾下打開終端從github的https://github.com/jaumefontal/SASS-Build-SublimeText2.git上clone。然后編輯.scss直接保存即可編譯

                    9.2 官方的在線轉換器：http://www.sassmeister.com/

                    9.3  在項目的scss文件夾下用終端命令

               9.4  據說webstorm內置了sass的編譯

               9.5  圖形化工具 koala

               9.6  gulp