SASS是一種CSS預處理器（css preprocessor）。它的基本思想是，用一種專門的程式語言，進行網頁樣式設計，然後再編譯成正常的CSS檔。
SASS提供四個編譯風格的選項：
nested：嵌套縮排的css程式碼，它是預設值。
expanded：沒有縮排的、擴充的css程式碼。
compact：簡潔格式的css程式碼。
compressed：壓縮後的css程式碼。
@import指令，用來匯入外部檔案。
@import "path/filename.scss";
如果導入的是.css文件，則等同於css的import指令。
sass有兩種註解方式，一種是標準的css註解方式/* */，另一種則是//雙斜桿形式的單行註釋，不過這種單行註釋不會被轉譯出來。
SASS允許使用變數，所有變數以$開頭
普通變數
定義之後可以在全域範圍內使用。
預設變數
sass的預設變數只需要在值後面加上!default即可。
sass的預設變數一般是用來設定預設值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在預設變數之前重新宣告下變數即可
#預設變數的價值在進行組件化開發的時候會非常有用。
特殊變數
一般我們定義的變數都為屬性值，可直接使用，但是如果變數作為屬性或在某些特殊情況下等則必須以#{$variables}形式使用。
多值變數
多值變數分為list型別和map型，簡單來說list型別有點像js中的陣列，而map類型有點像js中的物件
全域變數
在變數值後面加上!global即為全域變數。這個目前還用不上，不過將會在sass 3.4後的版本中正式應用。目前的sass變數範圍飽受詬病，所以才有了這個全域變數。
sass的巢狀包含兩種：一種是選擇器的巢狀；另一種是屬性的巢狀。我們一般說起或用到的都是選擇器的嵌套。
在選擇器嵌套中，可以使用&表示父元素選擇器
屬性嵌套：所謂屬性嵌套指的是有些屬性擁有同一個開始單字，如border-width，border-color都是以border開頭。
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}@at-root：sass3.3.0新增的功能，用來跳出選擇器嵌套的。
sass中使用@mixin 宣告混合，可以傳遞參數，參數名稱以$符號開始，多個參數以逗號分開，也可以給參數設定預設值。宣告的@mixin 透過@include 來呼叫
多個參數mixin
可以直接傳入值，如@include 傳入參數的數量小於@ mixin 定義參數的個數，則依照順序表示，後面不足的使用預設值，如不足的沒有預設值則報錯。除此之外還可以選擇性的傳入參數，使用參數名稱與值同時傳入。
多組值參數mixin
如果一個參數可以有多組值，如box-shadow、transition等，那麼參數則需要在變數後面加上三個點表示，如$variables ....。
@content
@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。
//sass style
//-------------------------------
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css style
//-------------------------------
@media only screen and (max-width: 480px) {
body { color: red }
}** @mixin 透過@include 呼叫後解析出來的樣式是以拷貝形式存在的，而下面的繼承則是以聯合宣告的方式存在的，所以從3.2 .0版本以後，建議傳遞參數的用@mixin ，而不是傳遞參數類別的使用下面的繼承%。 **
sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合宣告。使用選擇器的繼承，要使用關鍵字 @extend ，後面緊跟著需要繼承的選擇器。
佔位選擇器%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过 @extend 调用。
占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
%clearfix{
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0 a;
}
&:after {
clear: both;
}
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1{
width:300px;
}在 @media 中暂时不能 @extend @media外的代码片段，以后将会可以。
sass定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。另外，要注意运算单位
@if判断
@if可一个条件单独使用，也可以和 @else 结合多条件使用
三目判断
if($condition, $if_true, $if_false)
for循环有两种形式，分别为：@for $var from
@each循环
语法为：@each $var in
多个字段list数据循环
//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
//css style
//-------------------------------
.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;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}以上是關於SASS的學習總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！
