sass安裝使用

時間 2019-11-18

標籤 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。先導官網下載個rubycss

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

四 sass安裝

而後直接在命令行中輸入git

gem install sass

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

若是要安裝beta版本的，能夠在命令行中輸入web

gem install sass --pre

你還能夠從sass的Git repository來安裝，git的命令行爲gulp

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

升級sass版本的命令行爲數組

gem update sass

查看sass版本的命令行爲瀏覽器

sass -v

你也能夠運行幫助命令行來查看你須要的命令sass

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註釋

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

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

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

標準的CSS註釋 /* comment */ ，會保留到編譯後的文件。ruby

單行註釋 // 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