1、sass的安裝：
（1）下載安裝Ruby，記得安裝的時候勾選第二項，
（2）打開控制面板gem install sass（人品好的話，一下子就能安裝成功)
（3）如果（2）安裝不成功進行一下步驟：gem sources -remove htpps://rubygems.org/
gem sources -a http://gems.ruby-china.org
gem sources -l
gem install sass 2、sass的編譯
(1)下載安裝koala
(2)打開koala把需要編譯的整個項目文件夾直接拖進去，選擇輸出路徑，并且可以在設置里面選擇輸出的編譯格式，
* nested：嵌套縮進的css代碼，它是默認值。
* expanded：沒有縮進的、擴展的css代碼。
* compact：簡潔格式的css代碼。
* compressed：壓縮后的css代碼。 3、引入sass文件
引入sass文件其實還是引入的css文件，所以需要在html頁面引入編譯好的css文件 4、編寫sass文件
（1）在頭部加入@charset"utf-8"

（2）用$聲明變量:css與sass的最大的區(qū)別就是sass里面可以聲明變量，從而減少了代碼的冗余，
聲明方式:$變量名：值 ($width:40px)
調(diào)用方式:width:$width;
編譯出來：width:40px;

(3）不傳參的混合宏 @mixin ：混合宏就是將一堆經(jīng)常重復使用的代碼塊放在一起，
聲明例如：@mixin margin_style{ margin-top:20px;margin-left:30px;}
調(diào)用方式:@include margin_style
編譯出來：margin-top:20px;margin-left:30px;
不足：調(diào)用混合宏編譯出來的css代碼不會合并，使得代碼變得臃腫冗余

（4）傳參的混合宏:
聲明方式：@mixin margin_style($style,$value){ margin-#{style}:$vaule}
（也可以在（）里面給他默認值，如果調(diào)用的時候沒有給他值就是用默認值）
調(diào)用方式:@include margin_style(top,20px)
編譯出來：margin-top:20px;

（5）擴展/繼承：如果有一個clss具有某些css樣式了，但是另一個clsaa也需要這些樣式，就可以繼承前面的css樣式
使用方法 @extend .需要繼承的class
不足：如果基類，并不存在于html中時，不管調(diào)用沒調(diào)用，在編譯的時候都會將他的css都將產(chǎn)生基類對應的樣式代碼

（6）占位符：class中沒有這個css樣式,但是后面經(jīng)常用到了用到了，就可以把它寫成一個單獨的樣式里面去，然后讓其他的class去繼承
使用方法：%名字{}
調(diào)用方法：@extend %名字

（7）if指令：@if @else

（8）for循環(huán)：
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示變量
start 表示起始值
end 表示結束值
（這兩個的區(qū)別是關鍵字 through 表示包括 end 這個數(shù)，而 to 則不包括 end 這個數(shù)。）

(9)while循環(huán) ：while 循環(huán)條件
(10)字符串函數(shù)：
unquote($string)：刪除字符串中的引號；
quote($string)：給字符串添加引號。
To-upper-case()將小寫字母轉(zhuǎn)換成大寫字母
to-lower-case（）將大寫轉(zhuǎn)換成小寫

(11)引入：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

(12)@media：可以嵌套使用
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
(13)@extend 是用來擴展選擇器或占位符
(14)@at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層之后，想讓某個選擇器跳出，此時就可以使用 @at-root。
(15)@debug 在 Sass 中是用來調(diào)試的，當你的在 Sass 的源碼中使用了 @debug 指令之后，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug:
(16)@warn 和 @debug 功能類似，用來幫助我們更好的調(diào)試 Sass
(17)@error 和 @warn、@debug 功能是如出一轍。

轉(zhuǎn)載于:https://www.cnblogs.com/ryt103114/p/6015880.html

總結

以上是生活随笔為你收集整理的sass心得的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。