sass學習

一、sass與scss的區別：

sass定義

sass是一種基於css的預處理語言，在css的基礎上進行簡化，sass可以定義變數、巢狀、擴充套件、條件判斷、迴圈等功能。

sass目前有兩種語法規則：sass、scss。

1） 第一種語法規則sass,又被稱為縮排語法，該種語法不使用大括號、分號，而是通過縮排來指定塊。副檔名為.sass
2） 第二中語法為scss,該語法與我們平時的css語法差不多，使用大括號、分號。scss是sass3引入新的語法，該語法完全相容css3,並且繼承了sass的強大功能，另外還能識別大部分css hacks和特定於瀏覽器的語法（這真是太好不過了）。副檔名為.scss

scss更和平常css寫法類似，平常一般用scss作為字尾

二、sass語法

1.匯入：@import

sass的匯入規則與css有所不同。

2.註釋

1）多行註釋：/**/
2)當行註釋：//
css只有一種註釋方式：//

3.變數

1)普通變數：ex:$var:#ccc；

$colorPra: 12px;
body{
    font-size:$colorPra;
}

2)預設變數：ex: $var: 1.5 !default;【用來設定預設值】

$heightH1:        1.5 !default;
body{
    line-height: $heightH1; 
}
 

預設變數設定預設值，根據需求覆蓋

$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

3)特殊變數
該類變數可以設定 屬性 或在某些特殊情況下使用。

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}
 

4)多值變數：list ，map

$pxA:500px 200px 300px ;//一維陣列
$borderM:(1px solid #ccc),(2px dashed #000);  //二維陣列
.aa{
    width:nth($pxA,1);
    height:nth($pxA,3);
    border:nth($borderM,1)
}
.bb{
 border:nth($borderM,2);
}

5)全域性變數：!global

4.巢狀

1）選擇器巢狀
2）屬性巢狀
3）跳出巢狀：@at-root
@at-root (without: all/rule(預設值)/media/support)
@at-root (with: …)

5.混合:@mixin @include

1)無引數：

@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

2）有引數

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

等同於

.opacity{
  @include opacity; //引數使用預設值
}
.opacity-80{
  @include opacity(80); //傳遞引數
}

3)多個引數

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

等同於

.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

[email protected]

7.繼承:@extend

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

8.佔位選擇器: %

9.函式

在sass中有已經定義好的函式使用，比如我們經常使用的顏色函式：lighten(color,amount)和darken(color,amount)，但是我們也可以自己定義自己需要的函式。

$fontSizeDefault:      16px !default;
$gray:              #000 !defualt;        

@function pxTorem($px) {
  @return $px / $fontSizeDefault* 1rem;  //將畫素px轉化為rem值
}

.aa{
  font-size:pxTorem(30px);
  background:$gray;
  &:hover{
     background:lighten($gray,10%);  //顏色函式計算
  }
}

10.運算：+- * /

進行運算的只能是可以進行 + = /* 的數值型屬性（ex:數字、顏色、變數等），在進行運算的時候需要在運算子前後空格，否則會出錯。

$pxA:500px 200px 300px ;//一維陣列
.tt{
    color:#fff;
    width:1200px - nth($pxA,1); //進行-運算
}

11.條件判斷及迴圈

1）@if 或者 @if @else if @else判斷

$ifTrue :true;   //true false 在sass 可作為判斷條件
.ab{
    @if $ifTrue{
        display:inline-block;
    }
}

結果為：

.ab {
  display: inline-block;
}

注：當$ifTrue 值為false 時，.ab類中的display是沒有的。

2）三目判斷
3）for迴圈
4）@each迴圈
5）多個欄位list、map資料迴圈

四、函式統計

很多函式平常是用不上的，但是這裡羅列出一些函式，方便以後使用

@規則：

五、工欲善其事必先利其器，sass編輯工具koala

koala用起來非常方便，在專案中使用sass時，該軟體配合SublimeText使用，將scss檔案自動編為css檔案。

附上sass地址,保留地址，方便以後檢視。

http://www.w3cplus.com/sassguide/

http://www.sass.hk/docs/