Sass 是什么？

Sass 是Syntactically Awesome Stylesheete Sass的縮寫，是由Hampton Catlin開發(fā)的。

Sass可以簡化你的Css工作流，并可以使你的Css的擴展和維護工作變的更加容易！

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

Sass引入了一些新的概念如，變量，混合，嵌套和選擇器繼承。

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

以下是css的表示：

#skyscraper_ad
{
  display: block;
  width: 120px;
  height: 600px; 
}

#leaderboard_ad 
{
  display: block;
  width: 728px;
  height: 90px; 
}

在sass中將會這樣寫：

#skyscraper_ad
  display: block
  width: 120px
  height: 600px

#leaderboard_ad 
  display: block
  width: 728px
  height: 90px

Sass用兩個空格縮進來定義代碼的嵌套。

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

變量

$red: #FF4848

在Sass中，可以使用像darken和lighten函數(shù)來修改變量值。

在下面的例子中，p標(biāo)簽中的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 {
  font-weight: bold;
  font-size: 22px; }
.speaker .position {
  font-size: 12px; }

屬性嵌套

“屬性嵌套”是第二種類型的嵌套。
你可以嵌套帶有相同前綴的屬性。

$fontsize: 12px

.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

從以上的例子中可以看出，我們讓font:另起一行，并且給了兩個空格的縮進，然后，就可以設(shè)置原來帶連字符的屬性了。
所以當(dāng)我們以上面的格式書寫font的屬性weight時，這種格式會自動生成css屬性font-weight:

.speaker .name {
  font-weight: bold;
  font-size: 22px; }
.speaker .position {
  font-size: 12px; }

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

像這種類型的嵌套對于你組織和結(jié)構(gòu)化你的css是一種神奇的方法，同時，它還可以減少沒有必要的代碼重復(fù)。

混合

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

混合能夠使你重用一整段Sass代碼，你甚至能夠給他們傳遞參數(shù)，同時，你還能夠確定默認的值，這也是十分酷的！

定義一個混合，需要用到@mixin關(guān)鍵字，后面跟上你為混合選擇的名字。如果你需要一些參數(shù)，在名字后面，添加一對括號，并在括號中定義你的參數(shù)變量。如果你需要默認值，可以再參數(shù)后面添加冒號和你想要的默認值。

使用混合是容易的，通過調(diào)用@includSass關(guān)鍵字，后面跟著混合名和用括號包含的參數(shù)值。

下面是例子：

@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:

h1 {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2x; }

.speaker {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

在以上例子中，我們給h1中的radius中設(shè)定了值，而.speakr中，因為沒有設(shè)定值，所以radius中的值為默認值。
We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.

選擇器繼承

選擇器繼承能夠讓你實現(xiàn)選擇器可以繼承其他選擇器中的所有樣式，這也是讓人欲罷不能的！
為了能夠?qū)崿F(xiàn)它，需要使用@extend關(guān)鍵字，后面跟著你想要繼承的選擇器，這樣，想要繼承的選擇器中的樣式都會在被繼承選擇器中實現(xiàn)。

h1
  border: 4px solid #ff9aa9

.speaker
  @extend h1
  border-width: 2px

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

h1, .speaker {
  border: 4px solid #ff9aa9; }

.speaker {
  border-width: 2px; }

嘗試一下sass

通過在線的方式嘗試一下

你能體驗Sass通過try Sass online，不需要將Sass安裝在你本地電腦。
在編譯以前，你需要選擇底部的縮進語法。

安裝使用

Sass是一個Ruby gem，假如以前你的機子中裝有Ruby gem，很容易在機子中安裝Sass。
Sass 能被用作為一個命令行工具，將你的Sass文件編譯成css文件。
你能做這個通過定義Sass類型——監(jiān)控
sass_文件夾：樣式列表_文件夾中包含著sass文件夾和樣式列表文件夾，sass文件夾中包含的sass文件后綴名必須為.sass，樣式列表文件夾中包含的是你的輸出文件夾。監(jiān)控選項的選擇意味著如果你對文件作任何改變，一旦你保存他們，文件將會自動轉(zhuǎn)變。

將css轉(zhuǎn)變?yōu)镾ass

你開始在現(xiàn)有的項目中使用Sass通過使用sass轉(zhuǎn)化。
進入你的電腦，打開你想要轉(zhuǎn)化的文件夾，選擇-convert-from-css-to sass.-R意味著遞歸，.意味著當(dāng)前的目錄。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論