首先安裝sass,先要下載ruby,因爲sass是基於ruby做的開發;
ruby地址下載鏈接,我用的是Ruby2.3.3這個版本
安裝ruby的時候記得勾選 Add Ruby executables to your PATH,直到 Ruby 安裝程序完成 Ruby 安裝爲止。如果您的安裝沒有適當地配置環境變量,接下來您可能需要進行環境變量的配置。
安裝完ruby之後,cmd終端執行,
ruby -v
如果有版本號就說明安裝成功了。之後通過命令行安裝:
gem install sass
安裝完成之後
sass -v
查看下版本號如果和ruby的版本號一樣就成功了,此刻安裝工作環境工作就準備好了。
下面就可以進行開發了,下面在編輯器中建立一個開發的文件夾,我用的編輯器是sublime text 3,在使用sublime之前,要先安裝sass的插件,不會的自行百度安裝。沒有sass和scss的格式支持,開發將無法識別進行轉譯。
我的個人文件目錄,僅供參考
在sass文件夾中建立style.scss文件
body{
font-size: 15px;
color: blue;
line-height: 1;
}
style.scss寫完之後,cmd中進入代碼根目錄文件夾;我的根目錄文件集是E:\liwei-sass,在此目錄執行命令(下面做個特別的演示,以防止你弄錯目錄,後面的目錄和以下的一樣,就不做重複操作了)
E:\liwei-sass>sass sass/style.scss:sass/style.css
此時css文件夾中就會生成一個style.css的代碼,就是由scss文件編譯好的css文件。(提個醒:編譯之前css文件夾是空的,執行上面的命令之後,會自動生成對style.scss的轉移成style.css)
如果想要執行監視功能,就是保存文件之後就可以直接看見代碼編譯scss成css的效果,那就在liwei-sass處執行即可.
sass –watch sass:css
此刻,只要style.scss 輸入一個css的屬性之後,直接ctrl+s 保存,style.css的代碼就會跟着進行改變。做到了實時編譯的效果,節省開發時間、提高開發效率。
如果你覺得上面的body代碼太簡單了,根本看不出來兩者都啥區別,下面我就寫一個稍微複雜一點的,給你做參考,當你執行完這個代碼之後,理解sass的編譯就很容易了.好了不說了,直接上代碼
以下是style.scss的代碼部分:
ul{
font-size: 15px;
li{
list-style: none;
span{
text-align: center;
font-weight: bold;
}
}
}
以下是編譯好之後style.css的代碼部分:
ul {
font-size: 15px; }
ul li {
list-style: none; }
ul li span {
text-align: center;
font-weight: bold; }
這樣看起來是不是就知道了,sass的結構,看起來就清晰了許多吧.
爲了讓你在視覺上有明顯直觀的感覺,下面在給你介紹幾種scss的輸出格式.
nested,嵌套
expanded,擴展
compact,緊湊
compressed,壓縮
第一種nested就是上面代碼展示的那樣.這裏舉一個例子,就拿expanded來做演示.在終端執行
sass –watch sass:css –style expanded
(注:“-”是兩個,不是一個)
編譯之後,style.css顯示的效果如下:
ul {
font-size: 15px;
}
ul li {
list-style: none;
}
ul li span {
text-align: center;
font-weight: bold;
}
這種css的格式你再熟悉不過了吧。其他幾個樣式如果你想看看效果,可自行執行命令即可。
sass的入門開發就是這樣,進階之路還在繼續,後期我會繼續更新文章。
有問題的話,可以郵箱聯繫我,個人郵箱:[email protected],大家一起學習,共同成長~