Sass變數的定義

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

特殊變數：如果變數巢狀在字串中，則需要寫在 #{} 符號裡面，如：

$top:top;
div{
　　margin-#{$top}:10px
}

變數的呼叫

.btn-primary{
background-color:$btn-primary-bg;
color:$btn-primary-color;
border:1px solid $btn-primary-border;
}

not(:last-child) //選中除了最後一個元素併為其加上樣式

.layout:not(:last-child)
 
{
    margin:0 0 0 10px;
}

mixin的使用(永遠不要使用@extend)

@mixin foo {
    color: red;
    font-weight: bold;
    line-height: 2;
}

.#{unique-id()}-#{$i} {
    @include foo;
    content: "ibf#{&}jaslbw";
}

sass中的&用法（這裡表示父元素）

/*偽類巢狀*/
.clearfix{
 &:before,
 &:after{
   content:"";
   display: table
 
;
 }
 &:after {
   clear:both;
   overflow: hidden;
 }
}

媒體查詢中的巢狀(這裡&代表main)

.main {
    float: left;
    width: 45em;
 
    @media (max-width: 480px) { 
　　　　& { float: none; width: 100%; }
　　 }
 } 

&的另一個妙用

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size
 
: 30px;
    line-height: 46px;
  }
}
編譯後

.dashboard-container {
margin: 30px;
}
.dashboard-text {
font-size: 300px;
line-height: 46px;
}

@content

在sass3.2.0中引入， 可以用來解決css3中 @meidia 或者 @keyframes 帶來的問題。它可以使@mixin接受一整塊樣式，接收的樣式從@content開始

//sass 樣式             
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
  
@include max-screen(480px) {
  body { color: red }
}
  
//css 編譯後樣式
@media only screen and (max-width: 480px) {
  body { color: red }
}

使用@content解決@keyframes關鍵幀的瀏覽器字首問題

// 初始化變數
$browser: null;
// 設定關鍵幀
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}
  
// 引入
@include keyframes(scale) {
    100% {
        #{$browser}transform: scale(0.8);
    }
}
  
// css編譯後
@-webkit-keyframes scale {
    -webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {
   -moz-transform: scale(0.8);
}
@-o-keyframes scale  {
    -o-transform: scale(0.8);
}
@keyframes scale  {
    transform: scale(0.8);
}

高階用法

1）函式 function

 sass允許使用者編寫自己的函式，以@function開始

$fontSize: 10px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(16px);
}
// css編譯後樣式
div {
    font-size: 1.6rem;
}
　　

 2）if條件語句&&三目判斷

語法為 if($condition, $if_true, $if_false)。 三個引數分別表示： 條件，條件為真的值，條件為假的值
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

@if語句可以用來判斷

// sass樣式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css編譯後樣式
div {
    color: green;
}

3）迴圈語句

for迴圈有兩種形式，分別為：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示變數，start表示開始值，end表示結束值，兩種形式的區別在於 through 包括 end 的值，to 不包括 end 值。

// sass樣式
@for $i from 1 to 4 {
    .item-#{$i} {width: 2em * $i;}
}
// css編譯後樣式
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}
　　

 

while迴圈 


// sass樣式
$i: 2;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 1;
}
// css編譯後樣式
.item-2 {
  width: 4em;
}
.item-1 {
  width: 2em;
}
　　

 

@each迴圈：語法為@each $var in <list or map>。 其中$var表示變數，而list和map表示資料型別，sass3.3.0新加入多欄位迴圈和map資料迴圈

單欄位list資料迴圈

//sass 樣式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css 編譯後樣式
.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
　　



多欄位list資料迴圈


//sass 樣式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//css 編譯後樣式
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}
　　

 

多欄位map資料迴圈


//sass 樣式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css 編譯後樣式
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}