首頁(yè)來(lái)說(shuō)SASS和SCSS的區(qū)別
　　sass是一種對(duì)css的一種提升，可以通過(guò)編譯生成瀏覽器能識(shí)別的css文件。sass技術(shù)的文件的后綴名有兩種形式：.sass和.scss。這兩種的區(qū)別在于.sass文件對(duì)代碼的排版有著非常嚴(yán)格的要求，而且沒(méi)有大括號(hào)，沒(méi)有分號(hào)。

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

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

　　對(duì)于一個(gè)沒(méi)有前端基礎(chǔ)的編程人員，寫(xiě)css樣式是一件非常痛苦的事情，他們會(huì)感覺(jué)到各種約束，為什么我不能定一個(gè)變量來(lái)避免那些類(lèi)似“變量”的重復(fù)書(shū)寫(xiě)？為什么我不能繼承上個(gè)class的樣式定義？。。。SASS/SCSS正是幫編程人員解開(kāi)了這些疑惑，讓css看起來(lái)更像是一門(mén)編程語(yǔ)言。 

　　對(duì)于一個(gè)前端開(kāi)發(fā)人員來(lái)說(shuō)，我不熟悉編程，也不關(guān)注css是否具有的一些編程語(yǔ)言特性，但這不是你放棄他的理由，css3的發(fā)展，加之主流瀏覽器的兼容性不一，很多瀏覽器都有自己的兼容hack，很多時(shí)候我們需要針對(duì)不同的瀏覽器寫(xiě)一堆的hack，這種浪費(fèi)時(shí)間的重復(fù)勞動(dòng)就交給SASS處理去吧！

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

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

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

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

一個(gè)CSS示例：

.button {

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

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

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

}

Sass正是加入CSS的語(yǔ)法規(guī)則。你仍然可以在Sass中寫(xiě)普通的CSS語(yǔ)句，它會(huì)工作得很好，其實(shí)，當(dāng)你寫(xiě)Sass代碼時(shí)，文件會(huì)被編譯成一個(gè)標(biāo)準(zhǔn)的CSS文件... ...會(huì)有專(zhuān)門(mén)的軟件來(lái)完成Sass代碼讓瀏覽器識(shí)別和轉(zhuǎn)換成CSS代碼。

偉大的事情

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

　　我將會(huì)盡力解釋幾個(gè)Sass中最酷的功能，以及它們對(duì)你和你的網(wǎng)站來(lái)說(shuō)意味著什么。

嵌套

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

.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)在，它似乎也沒(méi)什么大不了的，但一旦你習(xí)慣了這樣編寫(xiě)代碼，就沒(méi)有了回頭路。那么，它是怎樣提高開(kāi)發(fā)過(guò)程的？

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

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

變量

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

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

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

$pageWidth: 100%;

$containerWidth: 960px;

// 描述的：顏色變量

$grey: #E3E3E3;

$blue: #1f605b;

$white: #FFFFFF;

$black: #000000;

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

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

局部

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

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

// 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";

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

好吧，在技術(shù)上它首先幫助了我，然后通過(guò)我來(lái)幫助你。局部，通過(guò)把你的項(xiàng)目中有邏輯的、能夠被復(fù)用、移動(dòng)、或者編輯的部分組織起來(lái)，使設(shè)計(jì)師或程序員的生活更輕松，這對(duì)設(shè)計(jì)師是有意義的。它使得維護(hù)一個(gè)局文件，組織大型項(xiàng)目變得更加容易。

混合宏

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

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

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

// 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;

}

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

來(lái)自設(shè)計(jì)師的一行代碼使你看到了一個(gè)美麗的泛著黃色光芒按鈕，當(dāng)你點(diǎn)擊按鈕時(shí)，它像旋風(fēng)一樣消失了，這類(lèi)奇妙的效果會(huì)兼容盡可能多的不同的瀏覽器和設(shè)備。

還有不少其他的東西使Sass稱(chēng)為超級(jí)有用而值得一提的語(yǔ)言。

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

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

Sass還有許多其他強(qiáng)大的功能，如隱藏注釋?zhuān)嘉环x擇器，數(shù)據(jù)類(lèi)型，顏色操作，變量的默認(rèn)值，擴(kuò)展，控制指令（如@if，@for或@while）等。

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

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

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

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