DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> Sass教程 >> 2.2 Sass的使用
2.2 Sass的使用
編輯:Sass教程     

上一節我們只是配置了一下Sass的開發環境,只有把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

在這個Sass教程的學習中,我們建議大家使用sassmeister來輔助學習。sassmeister是Sass官網為我們提供的一個在線編輯器,我們只需要在左邊編寫Sass代碼,右邊就會自動編譯出CSS代碼。sassmeister官方地址:進入官網

當然,在實際開發中,我們還是要借助本地編輯器來開發的。“學習”跟“開發”不一樣,在學習的過程中,使用sassmeister來得更加方便一些。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved