點擊查看 sass 官方文檔
1.編譯
初學可以在atom 中編譯
- 安裝命令 gem install sass
- atom中安裝atom-sass ,mac 中“control+option+c”,windows中“Alt + Ctrl + c” 監(jiān)控修改的樣式文件；
在終端通過指令控制
- sass --watch sass文件夾名：css文件夾名 --style 編譯后的格式
- sass --watch 單個scss文件名稱：css文件名稱 --style 編譯后的格式
- "1筹吐，2"中的文件夾或者文件名稱路徑不能出錯
通過終端輸出的4種格式選擇：
（1）nested
Sass 默認的輸出格式糖耸，能夠清晰反映 CSS 與 HTML 的結(jié)構(gòu)關(guān)系。選擇器與屬性等單獨占用一行丘薛，縮進量與 Sass 文件中一致嘉竟，每行的縮進量反映了其在嵌套規(guī)則內(nèi)的層數(shù)。
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
（2）expanded
Expanded 輸出更像是手寫的樣式，選擇器舍扰、屬性等各占用一行倦蚪，屬性根據(jù)選擇器縮進，而選擇器不做任何縮進边苹。
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
（3）compact
Compact 輸出方式比起上面兩種占用的空間更少陵且，每條 CSS 規(guī)則只占一行，包含其下的所有屬性勾给。嵌套過的選擇器在輸出時沒有空行滩报，不嵌套的選擇器會輸出空白行作為分隔符。
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
（4）compressed
Compressed 輸出方式刪除所有無意義的空格播急、空白行脓钾、以及注釋，力求將文件體積壓縮到最小桩警，同時也會做出其他調(diào)整可训，比如會自動替換占用空間最小的顏色表達方式。
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
2.變量
//編譯前
$color-white:#fff;
p{
color: $color-white;
}
//編譯后
p {
color: #fff; }
/*# sourceMappingURL=scss-test.css.map */
3.嵌套
(1) 嵌套普通標簽
//編譯前
$color-white:#fff;
div{
height: 100px;
p{
color: $color-white;
}
}
//編譯后
div {
height: 100px; }
div p {
color: #fff; }
（2）嵌套偽類:通過"&"實現(xiàn)
//編譯前
a {
color: #fff;
&:active{
color: #000;
}
}
//編譯后
a {
color: #fff; }
a:active {
color: #000; }
/*# sourceMappingURL=scss-test.css.map */
(3)在父級嵌套中捶枢，使用“&”引用父級
//編譯前
.test {
color: #fff;
& {
color:#666;
}
& &_ss{
color: #999;
}
}
//編譯后
.test {
color: #fff; }
.test {
color: #666; }
.test .test_ss {
color: #999; }
/*# sourceMappingURL=scss-test.css.map */
(4)嵌套屬性
//編譯前
div{
font:{size: 16px;
weight:400;
family:sans-serif;
}
border:2px solid #999{
left:4px;
right:4px;
}
}
//編譯后
div {
font-size: 16px;
font-weight: 400;
font-family: sans-serif;
border: 2px solid #999;
border-left: 4px;
border-right: 4px; }
/*# sourceMappingURL=scss-test.css.map */
4.混合：@mixin 和 @include
1.基礎(chǔ)
@mixin 名稱 {
...
};
//編譯前
@mixin test{
width:100px;
};
div{
@include test;
}
//編譯后
div {
width: 100px; }
/*# sourceMappingURL=scss-test.css.map */
2.可以傳參數(shù)
@mixin 名稱 （option1,option2...）{
...
};
@mixin test($width){
width:100px;
};
div{
@include test(100px);
}
//編譯后
div {
width: 100px; }
/*# sourceMappingURL=scss-test.css.map */
3.設(shè)置參數(shù)默認值
@mixin 名稱 （option1:value1,option2:value2,option3,option4...）{
...
};
//編譯前
@mixin test($width,$height:10px){
width:100px;
height:$height;
};
div{
@include test(100px);
}
//編譯后
div {
width: 100px;
height: 10px; }
/*# sourceMappingURL=scss-test.css.map */
5.函數(shù)(functions)
（1）sass自帶函數(shù)(更多自帶方法請查看官網(wǎng))
//編譯前
.div1{
width: max(10px,20px,40px);
}
.div2{
height: min(10px,20px,40px);
}
.div3{
height: ceil(10.1px);
}
.div4{
height: floor(10.1px);
}
//編譯后.div1 {
width: 40px; }
.div2 {
height: 10px; }
.div3 {
height: 11px; }
.div4 {
height: 10px; }
/*# sourceMappingURL=style.css.map */
(2)自定義函數(shù)
語法：
@function 函數(shù)名（參數(shù)1,參數(shù)2）{
...
}
//編譯前
@function addWidth($width1,$width2){
@return $width1+$width2;
}
div{
width:addWidth(100px,20px);
}
//編譯后
div {
width: 120px; }
/*# sourceMappingURL=scss-test.css.map */
(3)自定義函數(shù)取list顏色值
/*!
* 配置樣式
*/
$color_list:("red":"#ff5050","white":"#fff");
/**
* 獲取顏色
*/
@function get_color($key){
@return map-get($color_list,$key);
};
//使用方法
div{
color: get_color(red);
}
//編譯后
div{
color:#ff5050;
}
6.繼承擴展：@extend
@extend 會繼承指定元素的所有樣式握截，包括子元素的所有樣式
//編譯前
.test1{
width: 100px;
}
.test1 p{
color: #999;
}
.test2 {
@extend .test1;
height: 10px;
}
//編譯后
.test1, .test2 {
width: 100px; }
//.test2也繼承了.test1 的子元素p的樣式
.test1 p, .test2 p {
color: #999; }
.test2 {
height: 10px; }
/*# sourceMappingURL=scss-test.css.map */
7.導入樣式：@import
將多個文件中的樣式導入到一個文件，減少http請求次數(shù);
每個需要import的文件稱為partials烂叔，文件需要以下劃線“_”開頭谨胞，如"_color.scss"，以“_”開頭的文件不會編譯生產(chǎn)對應的css文件蒜鸡；
//編譯前
//_color.scss 文件內(nèi)容:
.color-blue{
color: blue;
};
//style.scss 文件內(nèi)容：
@import 'color';
//編譯后
//不生成對應的_color.css
//style.css 文件
.color-blue {
color: blue; }
/*# sourceMappingURL=style.css.map */
8.注釋 ：Comment
(1)多行注釋
會出現(xiàn)在編譯后的css文件中
/*
* 多行注釋
*/
(2)單行注釋
不會出現(xiàn)在編譯后的css文件中
//單行注釋
(3)多行強制注釋
會出現(xiàn)在編譯后的css文件中胯努，即使文件壓縮也會保留
/*！
* 多行強制注釋
*/
9.SassScript 支持 6 種主要的數(shù)據(jù)類型：
數(shù)字逢防，1, 2, 13, 10px //"number"
字符串叶沛，有引號字符串與無引號字符串，"foo", 'bar', baz//"string"
顏色忘朝，blue, #04a3f9, rgba(255,0,0,0.5)//"color"
布爾型灰署，true, false//"bool"
空值，null//"null"
數(shù)組 (list)局嘁，用空格或逗號作分隔符溉箕，1.5em 1em 0 2em, Helvetica, Arial, sans-serif//"list "
maps, 相當于 JavaScript 的 object，(key1: value1, key2: value2)
image.png
11.基礎(chǔ)運算
(1)加：+
//編譯前
.div1{
width: 10px+10px;
}
.div2{
width: 10px+10;
}
//編譯后
.div1 {
width: 20px; }
.div2 {
width: 20px; }
/*# sourceMappingURL=style.css.map */
(2)減：-
//編譯前
.div1{
width: 10px-5px;
}
.div2{
width: 10px-5;
}
//編譯后
.div1 {
width: 5px; }
.div2 {
width: 5px; }
/*# sourceMappingURL=style.css.map */
(3)乘：*
//編譯前
.div1{
//乘法計算的時候單位只能有一個悦昵，下面 10px*1px報錯
width: 10px*1px;
}
.div2{
width: 10px*2;
}
//編譯后
.div1{
//報錯
width: 10px*px;
}
.div2 {
width: 20px; }
/*# sourceMappingURL=style.css.map */
(4)除：/
//編譯前
.div1{
//不正確
width: 10px/2;
}
.div2{
//不正確
width: 10px/2px;
}
.div3{
//不正確
width: (10px/2px);
}
.div4{
//正確
width: (10px/2);
}
//編譯后
.div1 {
width: 10px/2; }
.div2 {
width: 10px/2px; }
.div3 {
width: 5; }
.div4 {
width: 5px; }
/*# sourceMappingURL=style.css.map */
12.插值語句
語法：
#{}
//編譯前
$height:10px;
$name:height;
/*
* @author:#{$name}
*/
.div-#{$name}{
#{$name}: #{$height};
};
//編譯后
/*
* @author:height
*/
.div-height {
height: 10px; }
/*# sourceMappingURL=style.css.map */
