為什麼使用SASS？

或許你已經聽過一個叫作SASS的東東?可能你已經了解它，並且你能像大師一樣寫出一些函數?

對於不清楚我在講什麼的讀者或者客戶，你們可以想想web開發過程，你們的期望和站點用戶的體驗想要怎樣的。無論如何，我都要給大家分享一下，為什麼我認為Sass是一個很好的東西。

對於那些不熟悉web前端開發的人，Sass和CSS或許只是一些讓人感覺凌亂的詞語，但就是這些詞語，對於幕後的開發過程是很重要!

優勢總結

易維護，更方便的定制

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

對於編程人員的友好

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

效率的提升

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

什麼是Sass?

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

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

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

一個CSS示例：

.button {

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

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

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

}

Sass與CSS有什麼區別?

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

偉大的事情

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

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

嵌套

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

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

}

}

}

現在，它似乎也沒什麼大不了的，但一旦你習慣了這樣編寫代碼，就沒有了回頭路。那麼，它是怎樣提高開發過程的?

在設計元素的邏輯中，這麼做足夠產生一個更加一致的視覺效果，而且讓後期千百次的創建和維護變得更加容易。

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

變量

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

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

// 實用的：結構變量

$pageWidth: 100%;

$containerWidth: 960px;

// 描述的：顏色變量

$grey: #E3E3E3;

$blue: #1f605b;

$white: #FFFFFF;

$black: #000000;

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

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

局部

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

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

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

那麼，局部如何幫助你呢?

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

混合宏

現在來看一些好東西。

Sass的另一大特點是，你可以在你的項目中創建和使用自己的混合宏，這會幫助設計人員節省大量的時間和代碼。混合宏是小的代碼片段(類似局部)，你可以在項目中任何需要的地方，通過@include來復用它們。

混合宏和變量配合使用會在修改某一處代碼時產生很強大的能力，一個很好的例子是在按鈕上創建圓角。通過使用預先設計好的包含創建圓角代碼的混合宏，其中用變量代替圓角值，這樣就能方便地對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;

}

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

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

其它東西

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

首先是能夠在樣式表中使用數學函數。這在創建不同大小的網格時是特有用的，或者可以為實現更好的動態響應式設計。

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

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

如果你有興趣閱讀一番，看看Sass的官方網站。

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

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

以上就是我們給大家介紹的SASS的內容了。希望大家繼