SASS 初學者入門

sass可以簡化你的css工作流，並可以使你的css的擴充套件和維護工作變的更加容易！

例如，曾幾時何，因為客戶的需求的變更，你必須不斷的通過查詢和替換來更改乙個畫素值，或者，為了能夠確定多欄布局中某一欄的寬度，你需要使用計算畫素值軟體才能搞定。

sass引入了一些新的概念如，變數，混合，巢狀和選擇器繼承。

sass看起來似乎和css很像，但它沒有分號和大括號。

以下是css的表示：

#skyscraper_ad

#leaderboard_ad

在sass中將會這樣寫：

#skyscraper_ad

display: block

width: 120px

height: 600px

#leaderboard_ad

display: block

width: 728px

height: 90px

sass用兩個空格縮進來定義**的巢狀。

通過以上的展示，你已經了解了sass怎麼書寫，接下來看一下一些讓sass變的如此神奇的一些東西。

$red: #ff4848

在sass中，可以使用像darken和lighten函式來修改變數值。

在下面的例子中，p標籤中的red將會比h1中的red更深。

$red: #ff4848
$fontsize: 12px
h1 color: $red
p color: darken($red, 10%)

你能夠運用『加』或『減』操作符來對相同型別的變數進行運算，如果我們想要手動的輕微的加深乙個顏色值，可以通過'-'來減去#101，同樣我們可以通過『+』來將字型值增大10px。

p.addition_and_subtraction

color: $red - #101

font-size: $fontsize + 10px

巢狀可以分為兩種型別：

選擇器巢狀是第一種型別巢狀。

sass中的巢狀和html中的巢狀是相似的。

$fontsize: 12px

.speaker

.name

font:

weight: bold

size: $fontsize + 10px

.position

font:

size: $fontsize

如果你看一下編譯後生成的css，你將會看見巢狀的.speaker類下的.name類生成的css選擇器：.speaker .name。

.speaker .name

.speaker .position

「屬性巢狀」是第二種型別的巢狀。

你可以巢狀帶有相同字首的屬性。

$fontsize: 12px

.speaker

.name

font:

weight: bold

size: $fontsize + 10px

.position

font:

size: $fontsize

從以上的例子中可以看出，我們讓font:另起一行，並且給了兩個空格的縮排，然後，就可以設定原來帶連字元的屬性了。

所以當我們以上面的格式書寫font的屬性weight時，這種格式會自動生成css屬性font-weight:

.speaker .name

.speaker .position

所有帶連字元的選擇器都支援以上格式。

像這種型別的巢狀對於你組織和結構化你的css是一種神奇的方法，同時，它還可以減少沒有必要的**重複。

混合

混合是另一種讓人著迷的sass特性。

混合能夠使你重用一整段sass**，你甚至能夠給他們傳遞引數，同時，你還能夠確定預設的值，這也是十分酷的！

定義乙個混合，需要用到@mixin關鍵字，後面跟上你為混合選擇的名字。如果你需要一些引數，在名字後面，新增一對括號，並在括號中定義你的引數變數。如果你需要預設值，可以再引數後面新增冒號和你想要的預設值。

使用混合是容易的，通過呼叫@includsass關鍵字，後面跟著混合名和用括號包含的引數值。

下面是例子：

@mixin border-radius($amount: 5px)

-moz-border-radius: $amount

-webkit-border-radius: $amount

border-radius: $amount

h1 @include border-radius(2px)

.speaker

@include border-radius

上面的sass將會編譯生成如下的css:

.speaker

在以上例子中，我們給h1中的radius中設定了值，而.speakr中，因為沒有設定值，所以radius中的值為預設值。

we specified the radius inh1, but for the.speakerwe didn』t specify anything, therefore the default of5pxis used.

選擇器繼承

選擇器繼承能夠讓你實現選擇器可以繼承其他選擇器中的所有樣式，這也是讓人欲罷不能的！

為了能夠實現它，需要使用@extend關鍵字，後面跟著你想要繼承的選擇器，這樣，想要繼承的選擇器中的樣式都會在被繼承選擇器中實現。

border: 4px solid #ff9aa9

.speaker

@extend h1

border-width: 2px

上面的將會編譯為如下的css

h1, .speaker

.speaker

嘗試一下sass

你能體驗sass通過try sass online，不需要將sass安裝在你本地電腦。

在編譯以前，你需要選擇底部的縮排語法。

sass是乙個ruby gem，假如以前你的機子中裝有ruby gem，很容易在機子中安裝sass。

sass 能被用作為乙個命令列工具，將你的sass檔案編譯成css檔案。

你能做這個通過定義sass型別——監控

sass_資料夾：樣式列表_資料夾中包含著sass資料夾和樣式列表資料夾，sass資料夾中包含的sass檔案字尾名必須為.sass，樣式列表資料夾中包含的是你的輸出資料夾。監控選項的選擇意味著如果你對檔案作任何改變，一旦你儲存他們，檔案將會自動轉變。

你開始在現有的專案中使用sass通過使用sass轉化。

進入你的電腦，開啟你想要轉化的資料夾，選擇-convert-from-css-to sass.-r意味著遞迴，.意味著當前的目錄。

在這篇文章中，我僅僅使用了sass的縮排語法，然而，還有一種更新的格式叫scss，它和sass的不同是它看起來更像你以前用的css，但是，它卻擁有類似sass的特徵，如變數，混合，巢狀和選擇器繼承。

sass在保持你的樣式表有好的結構和不會讓你重複方面真的很神奇，其中不乏一些大的專案如compass都使用混合來引入自己的css框架而不是在html中使用混亂的各種類。

所以，不要猶豫了，在下乙個專案中，趕緊嘗試一下sass的魅力吧！

SASS 初學者入門

SASS 初學者入門

ERP初學者入門

ERP初學者入門

SASS 初學者入門

SASS 初學者入門

ERP初學者入門

ERP初學者入門

相關推薦