1.安裝sass
安裝sass需要ruby的環(huán)境使用gem 命令安裝
Mac
使用MacBook的用戶
可以直接使用命令
<pre>
<code>
sudo gem install sass
</code>
</pre>
如果想安裝最新的beta版的sass可以使用命令
<pre>
<code>
sudo gem install sass --pre
</code>
</pre>
簡(jiǎn)單介紹一下sudo
這個(gè)命令就是因?yàn)樵贛ac系統(tǒng)上有權(quán)限分配的原因
<pre>
<code>
sudo
</code>
</pre>
就是可以讓mac知道你是擁有最高權(quán)限的用戶 才可以讓你安裝某些程序到跟目錄酸员，非用戶目錄下的文件中
Window
使用window的用戶可以上ruby的官網(wǎng)上下載ruby (一般我們使用的都是Stable版)并安裝好之后绩社，使用命令
<pre>
<code>
gem install sass
</code>
</pre>
同理需要安裝最新的beta版命令是
<pre>
<code>
gem install sass --pre
</code>
</pre>
給大家簡(jiǎn)單介紹一下關(guān)于sass的日常維護(hù)
1.顯示版本
<pre>
<code>
gem --version
</code>
<code>
sass --version
</code>
</pre>
2.升級(jí)sass
<pre>
<code>
gem update sass
</code>
</pre>
3.由于默認(rèn)使用的sass的安裝鏡像可能會(huì)被天朝墻，所以如果覺(jué)得有必要的話可以使用淘寶提供的鏡像
顯示鏡像
<pre>
<code>
gem sources -l
</code>
</pre>
移除鏡像
gem sources -l顯示的就是當(dāng)前的鏡像地址
<pre>
<code>
gem sources --remove https://rubygems.org/
</code>
</pre>
添加鏡像
(如果當(dāng)前系統(tǒng)不支持https可以改成http即可)
<pre>
<code>
gem sources -a https://ruby.taobao.org/
</code>
</pre>
那么當(dāng)前sass的環(huán)境就配置完成了。
我們就可以使用sass 來(lái)編寫css了
2.如何編輯sass
sass的文件是有2種的文件類型刊苍，分別是.sass和.scss
其中sass是不使用｛｝(大括號(hào))和躬审；(分號(hào))
其中scss是比較符合我們平時(shí)編寫的css使用大括號(hào)和分號(hào)
而且避免sass后綴名的嚴(yán)格模式報(bào)錯(cuò)
所以我推薦大家使用scss格式，并且使用2縮進(jìn)不要使用4縮進(jìn)
我們首先新建一個(gè)a.scss文件
寫入
<pre>
<code>
//這里是注釋
</code>
<code>
/**
*這里面的都是
*注釋
*編譯器會(huì)跳過(guò)
*/
</code>
$fontSize:16px;
$bgColor:#5993c5;
html,body{
$size:100px;
width:100%;
height:100%;
background:{
color:$bgColor
};
font-size:$fontSize;
div{
$fontSize:14px;
width:$size;
height:$size;
font:{
size:$fontSize
}
};
&>p{
font-size:$fontSize;
};
};
</pre>
這里我們可以進(jìn)行簡(jiǎn)單的介紹怎么使用sass
我們首先使用了css里面沒(méi)有的東西就是變量
$fontSize:16px;
$bgColor:#5993C5;
首先定義了一個(gè)背景顏色和字體大小的變量；
我們?cè)赽ody里面使用了背景顏色的變量
還有我們這個(gè)使用了類似object的東西,前端開(kāi)發(fā)都知道有復(fù)合樣式這個(gè)東西,其中background就是其中一個(gè)
<pre>
background-color:white;
background-image:url('');
background-repeat:no-repeat;
background-position:center;
.....
</pre>
這里的
<pre>
background:{
color:$bgColor;
}
</pre>
通過(guò)編譯器編譯出來(lái)的就是background-color:#5993c5;
所以我們都可以寫成
<pre>
background:{
color:white;
repeat:no-repeat;
image:url('../a.jpg');
};
</pre>
sass里面還有一個(gè)強(qiáng)大的功能就是內(nèi)嵌;
如a.scss文件里面所寫
<pre>
body{
div{};
&>p{};
}
</pre>
輸出a.css是
<pre>
body div{};
body > p{};
</pre>
最后入門的這個(gè)就是作用域的問(wèn)題了
大家都知道有變量打瘪，編程就會(huì)有一個(gè)作用域的概念；
所以在sass里面都會(huì)有作用域的概念
如a.scss所寫
<pre>
$fontSize:16px;
body{
font-size:$fontSize;
div{
$fontSize:14px;
font:{
size:$fontSize;
}
};
&>P{
font-size:$fontSize;
};
};
</pre>
這里全局有一個(gè)$fontSize的變量傻昙，作用域當(dāng)然就是這個(gè)整一個(gè)全局環(huán)境了闺骚。
在div里面又新建了一個(gè)$fontSize的變量
（在這里說(shuō)一下，sass里面是沒(méi)有變量聲明的妆档，以$符號(hào)開(kāi)頭 ：號(hào)賦值）
所以div最后編譯出來(lái)的就是
<pre>
body div{
font-size:14px;
}
</pre>
在p里面沒(méi)有新建變量僻爽，所以編譯器會(huì)從上層一級(jí)一級(jí)去找 直到找到全局環(huán)境如果都沒(méi)有的話就會(huì)報(bào)錯(cuò)，或者從上層找到了就馬上停止往上遍歷贾惦。所以這里編譯出來(lái)的就是
<pre>
body > p{
font-size:16px;
}
</pre>
3.編譯sass
單一文件編譯的時(shí)候我們使用的命令就是
<pre>
<code>
sass sass.scss style.css
</code>
</pre>
單一文件監(jiān)聽(tīng)命令
<pre>
<code>
sass --watch sass.scss:style.css
</code>
</pre>
文件夾監(jiān)聽(tīng)命令
<pre>
<code>
sass --watch sass:css
</code>
</pre>
我們還可以通過(guò)配置一些參數(shù)識(shí)得編譯出來(lái)的樣式文件滿足我們的需求
都是可以應(yīng)用在文件夾監(jiān)聽(tīng)的命令上
<pre>
<code>
sass --watch style.scss:style.css --style compact
</code>
<code>
sass --watch style.scss:style.css --style nested
</code>
<code>
sass --watch style.scss:style.css --style expanded
</code>
<code>
sass --watch style.scss:style.css --style compressed
</code>
</pre>
以上就是sass的入門指導(dǎo)胸梆，作者第一次編寫文章，如有不妥請(qǐng)向作者提出建議须板。作者會(huì)往后慢慢完善sass系列的指導(dǎo)和教程碰镜。
感謝讀者的關(guān)注
