在專案中用到了預編譯語言sass，平時用到最多的就是選擇器巢狀，有好多的使用語句或方式沒有用到， sass很強大，不是簡簡單單的使用乙個選擇器巢狀而已，根據頁面的布局結合sass的語法可以寫出更清晰的、擴充套件性好的結構，所以今天把sass的語法溫習了一遍；
.box
// //多個選擇器跳出
@at-root
.child2
} /**
預設@at-root只會跳出選擇器巢狀，而不能跳出@media或@support，如果要跳出這兩種，
則需使用@at-root (without: media)，@at-root (without: support)。
因為@support目前還無法廣泛使用，所以在此不表）。我們預設的@at-root其實就是@at-root (without:rule)
*/@at-root (without:rule)
}}//跳出media和父級
@media
print }}}
@media
screen
and (max-device-width:320px) }}}
/**sass中使用@mixin宣告混合，可以傳遞引數，引數名以$符號開始，
多個引數以逗號分開，也可以給引數設定預設值。
宣告的@mixin通過@include來呼叫
*/@mixin
float($float:left)
.fl
.fr
/**佔位選擇器%
從sass 3.2.0以後就可以定義佔位選擇器%。這種選擇器的優勢在於：
如果不呼叫則不會有任何多餘的css檔案，避免了以前在一些基礎的檔案中預定義了很多基礎的樣式，
然後實際應用中不管是否使用了@extend去繼承相應的樣式，
都會解析出來所有的樣式。佔位選擇器以%標識定義，通過@extend呼叫。
*/%flex
// 這是乙個變通的class選擇器無法是否使用都存在
.box
.parent ;
$color
: red blue;
color
:nth($color,1);
}//函式 注意返回的關鍵字是@return;
@functionsize($size:12px)
.f24
/**三目判斷
語法為：if($condition, $if_true, $if_false) 。三個引數分別表示：條件，條件為真的值，條件為假的值。
*/.f12
/**語法為：@each $var in 。其中$var表示變數，
而list和map表示list型別資料和map型別資料。
sass 3.3.0新加入了多字段迴圈和map資料迴圈。
*///list
$colors: red,blue,green;
@each $colorin $colors
}// map
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $name, $valuein $heading
}// map
$map
: (blue, blue, white),(red, red,white);
@each $name, $bg, $colorin $map -icon
}/**
for迴圈有兩種形式，分別為：@for $var from through 和@for $var from to 。
$i表示變數，start表示起始值，end表示結束值，
這兩個的區別是關鍵字through表示包括end這個數，
而to則不包括end這個數。
*/// 輸出到10
@for $ifrom
1through
10
}//輸出到9
@for $ifrom1to
10
}
pcc 預編譯語言（編輯中）
pcc 預編譯語言 c pre compilation language 是一種面向類的 存在於預編譯期的解釋語言。專門用來生成c 預編譯期語言，大大地提高了程式的復用性，提高了執行時效率。pc 包括巨集機制和模板機制。c 編譯期程式設計工具 template 編譯器整數計算 typedefs 1 ...
pcc 預編譯語言（編輯中）
pcc 預編譯語言 c pre compilation language 是一種面向類的 存在於預編譯期的解釋語言。專門用來生成c 預編譯期語言，大大地提高了程式的復用性，提高了執行時效率。pc 包括巨集機制和模板機制。c 編譯期程式設計工具 template 編譯器整數計算 typedefs 1 ...
vue引進less預編譯語言使用
前提是所有的環境配置都安裝好了 使用less預編譯語言 npm install less less loader asve 檢視已經安裝的地方 package.json dependencies中可以看到 node modules中也看到原始碼 然後在build檔案下的webpack.base.co...