AG积分

座機: 029-81773686 熱線: 18966895139
網頁制作、網絡營銷、維護推廣、手機網站制作一站式解決方案
十分感謝六年來與我們攜手共進的朋友們、客戶們!
為什么使用SASS/SCSS?SASS和SCSS的區別
添加時間:2016-02-20  點擊率:2622次
或許你已經聽過一個叫作Sass的東東?可能你已經了解它,并且你能像大師一樣寫出一些函數?
對于不清楚我在講什么的讀者或者客戶,你們可以想想web開發過程,你們的期望和站點用戶的體驗想要怎樣的。無論如何,我都要給大家分享一下,為什么我認為Sass是一個很好的東西。
對于那些不熟悉web前端開發的人,Sass和CSS或許只是一些讓人感覺凌亂的詞語,但就是這些詞語,對于幕后的開發過程是很重要!
首頁來說SASS和SCSS的區別
  sass是一種對css的一種提升,可以通過編譯生成瀏覽器能識別的css文件。sass技術的文件的后綴名有兩種形式:.sass和.scss。這兩種的區別在于.sass文件對代碼的排版有著非常嚴格的要求,而且沒有大括號,沒有分號。

優勢總結
易維護,更方便的定制 
  對于一個大型或者稍微有規模的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就可以準確并細致地控制邊框的類型,厚度和顏色,然后還可以改變它的背景顏色和按鈕的文本顏色,你只需要短短的三行。

Sass與CSS有什么區別?-----------重點
一個CSS示例:
.button {
    border: solid 3px black;  // 按鈕邊框樣式
    background-color: grey;  //按鈕背景顏色
    color: white;   // 按鈕文本顏色
}

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已經為開發過程打開了一個全新的局面,帶來了技術性的變革,它最終為網站的開發者帶來了好處,反過來又讓我們的客戶感到滿意。

文章出處:http://wearedando.com/whats-great-sass/
?
版權所有 ? AG积分宏博網絡,并保留所有權利
客服中心


展開客服