關於SASS--->推薦使用

 

 

 

做爲前端（html、javascript、css）的三大馬車之一的css，一直以靜態語言存在，HTML5火遍大江南北了、javascript因爲NODE.JS而成爲目前先後端統一開發語言的不二之選。只有css彷佛成爲前端開發的被忽視的角色了。

Sass讓css有了動態語言的特色，在初次學習css時，有時候一樣的樣式在不一樣的#或.中一次又一次重複的編碼，有了Sass，在css語法的基礎上不只能夠寫變量、函數，並且能夠百分百的轉換爲標準的css。再次把Don‘t Repeat Yourself進行到底，下降了「碼農」的工做量，提升了效率。並且如今愈來愈多的優秀開發人員專門利用sass和compass構建出很是優秀的前端樣式開發框架（如，Button），再一次提升咱們的生產力。

準備條件

在安裝和使用sass以前，須要一些準備條件：

1. 文件夾---存放.scss 或 .sass；

2. 編輯器，咱們推薦使用Sublime Text 2 或者 3；

3. 你的電腦須要安裝Ruby，由於sass是依賴於Ruby的。在windows須要本身手動下載Ruby的。

安裝Sass

使用命令行安裝sass：

gem install sass

使用命令，查看是否安裝成功，以下顯示錶示安裝成功：

$ sass -v Sass 3.3.8 (Maptastic Maple)

簡單使用Sass

在sass文件夾下建立demo1.scss文件，內容：

$myColor: #ccc; #page { color: $myColor; }

使用命令行：

sass demo1.scss demo1.css

會在同一個文件夾下生成一個demo1.css文件，內容：

#page { color: #cccccc; }

提升生產力的Sass

以下，在學習sass以前咱們大概都是這麼來寫css的：

ul.nav {float: right} ul.nav li {float: left;} ul.nav li a {color: #111} ul.nav li.current {font-weight: bold;}

但，有了sass後，那就方便多了：

ul.nav {  float: right; li {  float: left; a {  color: #111; } &.current { font-weight: bold; } } }

經過編譯，獲得css：

ul.nav { float: right; } ul.nav li { float: left; } ul.nav li a { color: #111; } ul.nav li.current { font-weight: bold; }

除了排版不同以外，再也看不出有什麼區別。但使用sass寫出來的樣式結構，不只井井有條，意思明確，並且編碼量明顯減小。

轉自：http://www.yemeishu.com/%E5%AD%A6%E4%B9%A0sass%E4%B9%8B%E5%AE%89%E8%A3%85sass%EF%BC%88%E4%B8%80%EF%BC%89/