Sass 是什么？

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

Sass可以簡(jiǎn)化你的Css工作流，并可以使你的Css的擴(kuò)展和維護(hù)工作變的更加容易！

例如，曾幾時(shí)何，因?yàn)榭蛻?hù)的需求的變更，你必須不斷的通過(guò)查找和替換來(lái)更改一個(gè)像素值，或者，為了能夠確定多欄布局中某一欄的寬度，你需要使用計(jì)算像素值軟件才能搞定。

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

Sass看起來(lái)似乎和css很像，但它沒(méi)有分號(hào)和大括號(hào)。

以下是css的表示：

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

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

在sass中將會(huì)這樣寫(xiě)：

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

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

Sass用兩個(gè)空格縮進(jìn)來(lái)定義代碼的嵌套。

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

變量

$red: #FF4848

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

在下面的例子中，p標(biāo)簽中的red將會(huì)比h1中的red更深。

$red: #FF4848
$fontsize: 12px
h1
  color: $red

p
  color: darken($red, 10%)

你能夠運(yùn)用‘加’或‘減’操作符來(lái)對(duì)相同類(lèi)型的變量進(jìn)行運(yùn)算，如果我們想要手動(dòng)的輕微的加深一個(gè)顏色值，可以通過(guò)'-'來(lái)減去#101，同樣我們可以通過(guò)‘+’來(lái)將字體值增大10px。

p.addition_and_subtraction
  color: $red - #101
  font-size: $fontsize + 10px

嵌套

嵌套可以分為兩種類(lèi)型：

選擇器嵌套

選擇器嵌套是第一種類(lèi)型嵌套。
sass中的嵌套和html中的嵌套是相似的。

$fontsize: 12px

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

如果你看一下編譯后生成的css，你將會(huì)看見(jiàn)嵌套的.speaker類(lèi)下的.name類(lèi)生成的css選擇器：.speaker .name。

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

屬性嵌套

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

$fontsize: 12px

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

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

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

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

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

混合

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

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

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

使用混合是容易的，通過(guò)調(diào)用@includSass關(guān)鍵字，后面跟著混合名和用括號(hào)包含的參數(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將會(huì)編譯生成如下的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中，因?yàn)闆](méi)有設(shè)定值，所以radius中的值為默認(rèn)值。
We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.

選擇器繼承

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

h1
  border: 4px solid #ff9aa9

.speaker
  @extend h1
  border-width: 2px

上面的將會(huì)編譯為如下的css

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

.speaker {
  border-width: 2px; }

嘗試一下sass

通過(guò)在線的方式嘗試一下

你能體驗(yàn)Sass通過(guò)try Sass online，不需要將Sass安裝在你本地電腦。
在編譯以前，你需要選擇底部的縮進(jìn)語(yǔ)法。

安裝使用

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

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

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

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

最新評(píng)論