易於書寫閱讀的CSS開發工具——SASS

最近接觸了一款css預處理器——SASS，並部署應用於新項目中

目前體驗上很是滿意，達到了預想中的效果，我的感受比之前用過的LESS語言更加豐富、更加優秀、更具備性價比

 

SASS簡化了咱們的css工做流，在樣式設計時更輕鬆，而且更易於平常閱讀維護

css自己是層疊樣式表，並不算一門編程語言，爲了豐富它的編程元素，因而出現了專爲css而生的css預處理器，某種程度上也能夠理解爲編程語言

而SASS正是其中之一，它提供了變量、繼承、語句等多樣化用法，像編程語言同樣書寫css

 

SASS的安裝與使用

安裝

首先須要安裝ruby，而後才能夠安裝SASS

ruby是啥樓主不懂也不關心，只知道SASS是ruby開發的，寫SASS不須要懂ruby，可是想安裝SASS得先安裝ruby

網上下載一個適合本身開發環境的Ruby版本，安裝後運行命令行

gem -v
ruby -v

運行成功後返回版本號

原本能夠直接安裝SASS

gem install sass

由於被牆應該不會成功，因而只好迂迴到淘寶RubyGems鏡像安裝SASS

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

運行成功最後返回源指向路徑，注意源指向路徑必須爲惟一

再次安裝SASS

gem install sass

升級SASS

gem update sass

 

使用

運行命令行直接看編譯後的css代碼，這樣並沒什麼實際做用

sass init.sass

把SASS文件編譯轉化爲css文件

sass init.scss init.css

咱們有SASS做爲開發文件，因此通常在編譯CSS文件時候直接選擇壓縮

sass --style compressed init.sass init.css

SASS提供了四種編譯風格，本身私下能夠逐一體驗

nested：嵌套而且縮進，默認值
expanded：嵌套但不縮進
compact：簡潔格式
compressed：壓縮

監聽SASS文件，發生變更時自動編譯轉化爲css文件

sass --watch init.scss:init.css --style compressed

編譯過程當中，若有語法錯誤則會編譯失敗，命令行與css文件都會提供具體錯誤信息

 

安裝WebStorm編輯器

Sublime、Dreamweaver都弱爆了，下載安裝個WebStorm編輯器才能和SASS好好玩耍

國際慣例，曬一下WebStorm編輯器

注意文件開頭聲明UTF8編碼，否則註釋裏若有中文編譯時會報錯

@charset "utf-8"

 

Sublime編輯器安裝SASS插件

Package Control組件安裝

首先，【Ctrl+`】調出 Sonsole（QQ輸入法快捷鍵會衝突，只能先去系統的輸入法屬性設置裏取消熱鍵切換至QQ拼音法了）

而後，粘貼以下代碼，回車

sublime 2
import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
sublime 3
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

最後，按提示重啓，【Ctrl+Shift+P】調出命令面板輸入 install，在下拉提示列表中選擇 Install Package，輸入 sass，在下拉提示列表中選擇 SASS

 

SASS語法

基本用法

變量

$cl: #333
body
	color: $cl

計算

$sz: 14px
$ln: $sz * 1.5

嵌套（選擇器、屬性、僞類三種嵌套方式）

.index
	border: 1px solid #ccc
		top: 3px solid #999
		radius: 5px
	a
		color: #666
		&:hover,&.active
			#333

註釋

/* 首頁 */
//導航條

 

代碼重用

繼承

html
	height: 100%

.index
	@extend html

混合

@mixin txt ()
	overflow: hidden
	white-space: nowrap
	text-overflow: ellipsis

@mixin rads ($v: 2px)
	-webkit-border-radius: $v
	-moz-border-radius: $v
	border-radius: $v

.index
	width: 200px
	@include txt
	@include rads(50%)

文件引用

@import '../base/set'

 

高級語句

條件

$cl: #333
.index
	@if lightness($cl) > 30%
		color: #666
	@else
		color: #999

循環語句

@for $i from 1 to 10
	.module_#{$i}
		background: url(../image/module_#{i}.png) 50% no-repeat

$i: 0
@while $i < 10
	$i: $i + 1
	.module_#{$i}
		background: url(../image/module_#{i}.png) 50% no-repeat

$arr: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
@each $i in $arr
	.module_#{$i}
		background: url(../image/module_#{i}.png) 50% no-repeat

自定義函數

@function large ($v)
	@return $v * 1.5

.index
	font-size: large(14px)

 

還有顏色函數等，暫時沒用得上的切合場景，API不算不多；SASS/SCSS/LESS不能直接與CSS比較誰更好，SASS/SCSS/LESS只是豐富CSS書寫方式的工具，最終頁面引用文件仍是須要編譯轉化後的CSS文件