上一節我們只是配置了一下Sass的開發環境,只有把Sass開發環境配置好,我們才可以開始編寫Sass代碼。那麼小伙伴可能就有疑問了:我們具體在哪寫Sass代碼呢?
之前我們都說過了,Sass只是用來輔助CSS開發的。編寫Sass代碼當然是借助我們自己的本地編輯器啦。總不能寫Sass用一個編輯器,而寫HTML和JavaScript又用另外一個編輯器,對吧?要是這麼麻煩,還學個毛線Sass。
每個人使用的編輯器都不一樣,有些人習慣用Sublime Text,有些人習慣用Webstorm。不管你用哪一種編輯器,都會有相應的Sass插件。小伙伴們自行搜索一下“如何在XXX(如Sublime Text 3)中編寫Sass”,會有詳細的插件安裝教程以及使用教程。因為每一種編輯器的安裝以及使用方法都不一樣,這裡就不詳細展開介紹了。
如果小伙伴們覺得使用的本地編輯器安裝Sass使用插件比較麻煩的話,也可以使用專門的Sass編譯工具:Koala。Koala(考拉)是一個非常強大的CSS預處理語言編譯工具,它不僅支持Sass,而且還支持Less、Compass等,使得開發者可以更高效地進行開發。具體使用,可以參考這裡:Koala安裝以及使用。
我們都知道Sass文件後綴名都是“.scss”或者“.sass”,我們不能像引入CSS文件那樣直接使用link標簽引入Sass文件的。也就是說,我們直接引入Sass代碼是不會生效的。因此,我們必須將Sass代碼轉換為CSS代碼,才能被頁面所用,這個過程被稱為“編譯”。
在本地編輯器中編寫Sass之後,也需要編譯成CSS才能使用。
在這個Sass教程的學習中,我們建議大家使用sassmeister來輔助學習。sassmeister是Sass官網為我們提供的一個在線編輯器,我們只需要在左邊編寫Sass代碼,右邊就會自動編譯出CSS代碼。sassmeister官方地址:進入官網
當然,在實際開發中,我們還是要借助本地編輯器來開發的。“學習”跟“開發”不一樣,在學習的過程中,使用sassmeister來得更加方便一些。