sass是css預處理器，sass是一種易於使用的樣式語言，可幫助減少傳統css的許多重複性和可維護性挑戰。學習sass可以編寫出可重複使用的樣式效，也是在工作和面試要求中不可或缺的一項技能了。
sass使您可以使用css中不存在的功能，例如變數，巢狀規則，混合，匯入，繼承，內建函式和其他內容。
支援/** **/和//兩種方式
/* block comments */
// line comments
@import關鍵字。
@import './other_sass_file`;
檔案的.scss或.sass副檔名是可選的。
$符號來宣告變數。
$red: #833;
body
#{}之中。
$side : left;
.rounded -radius: 5px;
}
&引用父元素，屬性也可以巢狀，比如border-color屬性。注意，border後面必須加上冒號
.markdown-body
&:hover }p
}
.markdown-body p
.markdown-body :hover
p
@extend關鍵字。
.button
.push-button
mixin一般用來編寫公共可復用的樣式，如定位上下左右居中、背景位址和大小。使用@mixin關鍵字來宣告，應用使用@include關鍵字
@mixin heading-font
h1
@mixin font-size($n)
body
@mixin pad($n: 10px)
body
// 設定預設的值
$default-padding: 10px;
@mixin pad($n: $default-padding)
body
rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)
mix($a, $b, 10%) // 10% a, 90% bred($color) // → 0..255
green($color)
blue($color)
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
for迴圈。
@for $i from 1 through 4
}
each迴圈（簡單），作用與for類似。
}}each迴圈（巢狀）
}while迴圈
$i: 6;
@while $i > 0
$i: $i - 2;
}
@if可以用來判斷，配套@else命令。
@if $position == 'left'
@else
@function double($n)
#sidebar
$list: (a b c);
nth($list, 1) // starts with 1
length($list)
@each $item in $list
$map: (key1: value1, key2: value2, key3: value3);
map-get($map, key1)
sass基本用法
本文都是以.scss為準 普通變數 sass的變數必須是以 開頭的，後面直接跟變數名 fontsize 12px body 如果變數需要預設值，在變數值的後面加上預設值的宣告 變數的預設值的宣告方式是變數值後加上 default 如下 baselineheight 2 baselineheight ...
sass用法總結
一 sass安裝 1 移除原有的ruby源位址 gem sources remove 2 新增可用的ruby源位址 gem sources a 3 安裝sass gem install sass 4 sublime支援scss檔案高亮顯示 借助package control安裝sass外掛程式，之後...
SASS用法指南
學過css的人都知道，它不是一種程式語言。你可以用它開發網頁樣式，但是沒法用它程式設計。也就是說，css基本上是設計師的工具，不是程式設計師的工具。在程式設計師眼裡，css是一件很麻煩的東西。它沒有變數，也沒有條件語句，只是一行行單純的描述，寫起來相當費事。很自然地，有人就開始為css加入程式設計元...