sublime 經驗總結 主題有 less2css

1. 安裝「包控制」模塊

操做步驟見該網站：https://sublime.wbond.net/installation#Simple

sublime2的代碼以下：

 

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

 

（若是上述代碼出錯，仍是到上述網站去複製）

大致的操做是：在sublime中按ctrl和~，進入控制檯，而後輸入網站中的指令，回車，最後重啓sublime。

安裝成功後，你會看到以下內容：

 

2. 下面舉個安裝Less2Css插件的例子（Less使得Css具有動態語言的特性）

Less2Css功能介紹：

當sublime中

1. 保存less文件的時候，自動生成同名的css文件，並提示編譯錯誤信息；

2.  可批量編譯項目目錄下的全部less文件爲css文件；

安裝步驟：

1.  ctrl 和 shift 和 p      或   preferences-》package control

在文本框中輸入install後再輸入less2css後按回車 ， 此時注意sublime左下角的信息安裝提示；

安裝成功後，重啓sublime。

3. less2css插件須要lessc

下面安裝lessc

到http://download.csdn.net/detail/c_cyoxi/7594863下載；

對於lessc的解釋：Less2Css插件依賴lessc這個工具，下載這個壓縮包，而後解壓後，將路徑添加到系統環境Path變量中，若在cmd中，輸入lessc，不報錯，則表示環境變量成功設置了。

lessc不須要安裝，只要設置好環境變量便可

4. 驗證less2css是否安裝成功

這時能夠在Sublime打開或者新建一個less文件，按下Ctrl+S保存，此時應該會在less文件的相同目錄下生成同名的css文件。

好比下面這段less代碼

@color : #4D926F;


#header {
  color: @color ;
}
h2 {
  color: @color ;
}

在sublime中保存後，會生成以下代碼

#header{color:#4d926f}

h2{color:#4d926f}

錯誤解決：

1. 保存less文件時，錯誤對話框內容爲： less2css error:[Error 2]

方法：這是因爲安裝完less2css後，sublime須要重啓。

關於less的使用建議閱讀官方網站

或者http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/  （它是中文文檔）