首頁來說SASS和SCSS的區(qū)別
　　sass是一種對css的一種提升，可以通過編譯生成瀏覽器能識別的css文件。sass技術的文件的后綴名有兩種形式：.sass和.scss。這兩種的區(qū)別在于.sass文件對代碼的排版有著非常嚴格的要求，而且沒有大括號，沒有分號。

優(yōu)勢總結(jié)

　　對于一個大型或者稍微有規(guī)模的UI來說，如果需要替換下整體風格，或者是某個字體的像素值，比如我們經(jīng)常會遇到panel，window以及portal共用一個背景色，這個時候按照常規(guī)的方式，我們需要一個個定位到元素使用的class，然后逐個替換，SASS提供了變量的方式，你可以把某個樣式作為一個變量，然后各個class引用這個變量即可，修改時，我們只需修改對應的變量。
 

　　對于一個沒有前端基礎的編程人員，寫css樣式是一件非常痛苦的事情，他們會感覺到各種約束，為什么我不能定一個變量來避免那些類似“變量”的重復書寫？為什么我不能繼承上個class的樣式定義？。。。SASS/SCSS正是幫編程人員解開了這些疑惑，讓css看起來更像是一門編程語言。 

　　對于一個前端開發(fā)人員來說，我不熟悉編程，也不關注css是否具有的一些編程語言特性，但這不是你放棄他的理由，css3的發(fā)展，加之主流瀏覽器的兼容性不一，很多瀏覽器都有自己的兼容hack，很多時候我們需要針對不同的瀏覽器寫一堆的hack，這種浪費時間的重復勞動就交給SASS處理去吧！

　　Sass（Syntactically Awesome Style Sheets）是一個相對新的編程語言，Sass為web前端開發(fā)而生，可以用它來定義一套新的語法規(guī)則和函數(shù)，以加強和提升CSS。通過這種新的編程語言，你可以使用最高效的方式，以少量的代碼創(chuàng)建復雜的設計。它改進并增強了CSS的能力，增加了變量，局部和函數(shù)這些特性。而這只使Sass一部分利器！

　　回過頭看，CSS是層疊樣式表，是一種樣式表語言，旨在方便地分離設計和內(nèi)容。內(nèi)容可以采用其他多種語言來提供，如靜態(tài)HTML或動態(tài)的PHP（以及許多其他）提供服務，而樣式，通常使用CSS來實現(xiàn)。

　　當你指定一個目標元素，并為該元素設置或更改屬性值時，你可以創(chuàng)建一組規(guī)則。例如，一個按鈕可以有一個邊框，你通過使用CSS就可以準確并細致地控制邊框的類型，厚度和顏色，然后還可以改變它的背景顏色和按鈕的文本顏色，你只需要短短的三行。

Sass與CSS有什么區(qū)別？－－－－－－－－－－－重點

一個CSS示例：

.button {

    border: solid 3px black;  // 按鈕邊框樣式

    background-color: grey;  //按鈕背景顏色

    color: white;   // 按鈕文本顏色

}

Sass正是加入CSS的語法規(guī)則。你仍然可以在Sass中寫普通的CSS語句，它會工作得很好，其實，當你寫Sass代碼時，文件會被編譯成一個標準的CSS文件... ...會有專門的軟件來完成Sass代碼讓瀏覽器識別和轉(zhuǎn)換成CSS代碼。

偉大的事情

　　因此，從一位代碼高手的角度來看，Sass中最好的東西實際上就是它“最簡單的想法”，為什么不把它們擺在首位...

　　我將會盡力解釋幾個Sass中最酷的功能，以及它們對你和你的網(wǎng)站來說意味著什么。

嵌套

　　第一個對Web開發(fā)人員的工作流程造成最大影響是Sass語法中的代碼嵌套和縮進。使用常規(guī)的CSS，每個元素在自己的“聲明塊”中獨立變化，你可以想象一下，如果一個房間里滿地都是不同大小的箱子會是什么樣子。而通過Sass，你可以在嵌套的塊里將相關的元素組合在一起，然后想象一下，同樣是那個房間，現(xiàn)在，一些小箱子已經(jīng)放在大箱子里了，你可以再次看到可愛的地板了。

.header {

    background-color: grey;

    padding: 10px 15px;

    .navigation {

        border: solid 1pc black;

        a {

            text-decoration: underline;

            padding: 10px;

        }

    }

    .social-buttons {

        background-color: red;

        float: right;

        a {

            color: white;

            margin-right: 5px;

        }

    }

}

現(xiàn)在，它似乎也沒什么大不了的，但一旦你習慣了這樣編寫代碼，就沒有了回頭路。那么，它是怎樣提高開發(fā)過程的？

在設計元素的邏輯中，這么做足夠產(chǎn)生一個更加一致的視覺效果，而且讓后期千百次的創(chuàng)建和維護變得更加容易。

當你能在幾百行代碼中輕松找出隱藏在其中的小錯并且快速修復時，你就應該覺悟：助你完成這一壯舉的Sass，必定會在前端開發(fā)領域產(chǎn)生巨大的反響...這樣讓人感覺有些成就感。

變量

盡管如此，我個人最喜歡的還是變量。大多數(shù)程序員都知道它的關鍵所在和怎么使用。本質(zhì)上，它是一個命名容器，用于承載整個編程項目中會重復使用的信息。

最好的例子是顏色。如果你想保持配色方案的完整性，你可以把顏色值存儲在變量中，然后用于整個網(wǎng)站的設計。您也可以使用它們來存儲其他公共的值，如字體名稱，填充值和其它亂七八糟的東西，或者你在后面可能會改變的東西。變量使Web開發(fā)更便捷，而且極大地確保了整個設計項目的可用性和一致性。

// 實用的：結(jié)構(gòu)變量

$pageWidth: 100%;

$containerWidth: 960px;

// 描述的：顏色變量

$grey: #E3E3E3;

$blue: #1f605b;

$white: #FFFFFF;

$black: #000000;

在一個網(wǎng)站的設計（樣式表）中使用變量會為客戶帶來許多好處。最強的是設計的一致性。通過精確控制哪些地方使用何種顏色，避免了二十種不同的藍色色調(diào)散落在整個網(wǎng)站的情況。

第二個最有用的好處是在設計過程中，當最后的配色方案仍在進行調(diào)整或改變，或者客戶改變主意要用粉紅色代替藍色，變量使得你能很容易地在你的樣式表中定位，只需要改變一個變量值，整個站點瞬間就能改變顏色。其它還有很多使用變量的方法，但我想你已經(jīng)懂了。

局部

Sass也通過另一種強大的方式幫你組織文件——使用局部系統(tǒng)。這是一種組織各種不同部分樣式表的方法，樣式表只在需要時才被引入、使用。

把你的樣式表分成不同的部分，如頁眉或頁腳，樣式表會立刻變得更高效，而且更加可維護。如果你想達到更好的效果，你可以將文件分割成一些可重用的模塊如導航、文章或按鈕，這樣你可以隨處使用它們。

// Reset, Variables, Mixins, Global Settings,

@import "variables";

@import "helpers/mixins";

@import "helpers/normalize";

@import "helpers/global";

// The SITE incl. Global Elements Styles

@import "site";

@import "credits";

那么，局部如何幫助你呢？

好吧，在技術上它首先幫助了我，然后通過我來幫助你。局部，通過把你的項目中有邏輯的、能夠被復用、移動、或者編輯的部分組織起來，使設計師或程序員的生活更輕松，這對設計師是有意義的。它使得維護一個局文件，組織大型項目變得更加容易。

混合宏

現(xiàn)在來看一些好東西。

Sass的另一大特點是，你可以在你的項目中創(chuàng)建和使用自己的混合宏，這會幫助設計人員節(jié)省大量的時間和代碼?；旌虾晔切〉拇a片段（類似局部），你可以在項目中任何需要的地方，通過@include來復用它們。

混合宏和變量配合使用會在修改某一處代碼時產(chǎn)生很強大的能力，一個很好的例子是在按鈕上創(chuàng)建圓角。通過使用預先設計好的包含創(chuàng)建圓角代碼的混合宏，其中用變量代替圓角值，這樣就能方便地對border-radius進行更改。

// Border Radius Mixin

// Use as: @include border-radius(10px);

@mixin border-radius($radius) {

  -webkit-border-radius: $radius;

  -moz-border-radius: $radius;

  -khtml-border-radius: $radius;

  border-radius: $radius;

}

使用混合宏的效果不會總是如此明顯，但它仍然為你的網(wǎng)站設計提供了有價值的服務。使用恰當時，它們可以幫助設計者為更復雜的瀏覽器維護兼容的代碼，如邊框特效，透明背景，CSS3動畫和其他等等。

來自設計師的一行代碼使你看到了一個美麗的泛著黃色光芒按鈕，當你點擊按鈕時，它像旋風一樣消失了，這類奇妙的效果會兼容盡可能多的不同的瀏覽器和設備。

還有不少其他的東西使Sass稱為超級有用而值得一提的語言。

首先是能夠在樣式表中使用數(shù)學函數(shù)。這在創(chuàng)建不同大小的網(wǎng)格時是特有用的，或者可以為實現(xiàn)更好的動態(tài)響應式設計。

另一個很好的例子是不起眼的父容器選擇器——連字符&——這使設計人員能夠通過選擇器元素創(chuàng)建專用的規(guī)則，例如在一個嵌套的代碼塊中定義鏈接元素的鼠標懸停狀態(tài)。

Sass還有許多其他強大的功能，如隱藏注釋，占位符選擇器，數(shù)據(jù)類型，顏色操作，變量的默認值，擴展，控制指令（如@if，@for或@while）等。

如果你有興趣閱讀一番，看看Sass的官方網(wǎng)站。

哇......所以，那么多迷人的功能?，F(xiàn)在，正常的CSS工作感覺就像玩一個8位游戲機——而我明明已經(jīng)可以使用PS3來玩了。拋開這個壞的比喻不說，Sass肯定已經(jīng)蓋過了原來介紹的web設計中CSS的功能和效率。

Sass已經(jīng)為開發(fā)過程打開了一個全新的局面，帶來了技術性的變革，它最終為網(wǎng)站的開發(fā)者帶來了好處，反過來又讓我們的客戶感到滿意。

文章出處：http://wearedando.com/whats-great-sass/