15 分鐘學會 Sass

如果您編寫大量的 CSS，預處理器可以大大降低您的壓力水平並為您節省大量寶貴的時間。使用 Sass、Less、Stylus 或 PostCSS 等工具可以使大型複雜的樣式表更易於理解和維護。由於變量、函數和 mixin 等特性，代碼變得更有條理，讓開發人員能夠更快地工作並減少錯誤。

正如您在我們關於 Less 的文章中所記得的那樣，我們之前使用過預處理器。這次我們將解釋 Sass 並向您展示它的一些主要功能。

1。開始使用

Sass 文件不能被瀏覽器解釋，因此它們需要在準備好訪問 Web 之前編譯為標準 CSS。這就是為什麼您需要某種工具來幫助您將 .scss 文件轉換為 .css。在這裡你有幾個選擇：

• 最簡單的解決方案是使用瀏覽器工具在現場直接編寫和編譯 Sass - SassMeister。
• 使用第 3 方桌面應用。提供免費和付費版本​​。您可以前往此處了解更多信息。
• 如果你和我們一樣是 CLI 人，你可以在你的電腦上安裝 Sass 並手動編譯文件。

如果您決定使用命令行，您可以以原始形式（用 ruby​​ 編寫）安裝 Sass，或者您可以嘗試使用 Node.js 端口（我們的選擇）。還有許多其他的包裝器，但由於我們喜歡 Node.js，我們將繼續使用它。

以下是編譯 .scss 文件的方法 使用節點 CLI：

node-sass input.scss output.css

另外，這裡是時候提到 Sass 提供了兩種不同的語法——Sass 和 SCSS。它們都做同樣的事情，只是用不同的方式編寫。 SCSS 是較新的，通常被認為更好，所以我們將繼續使用它。如果您想詳細了解兩者之間的區別，請查看這篇精彩的文章。

2。變量

Sass 中變量的工作方式與任何編程語言中的變量類似，包括數據類型和範圍等原則。當定義一個變量時，我們會在其中存儲一個特定的值，這通常是在 CSS 中經常出現的東西，比如調色板顏色、字體堆棧或酷盒子陰影的整個規範。

下面你可以看到一個簡單的例子。在選項卡之間切換以查看 SCSS 代碼及其 CSS 翻譯。

$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}

h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

這一切背後的想法是，我們以後可以更快地重用相同的值，或者如果需要更改，我們可以只在一個地方（變量的定義）提供新值，而不是在我們到處手動應用它'正在使用該屬性。

3。混合

您可以將 mixins 視為編程語言中構造函數類的簡化版本 - 您可以獲取一整組 CSS 聲明，並在任何您想賦予和元素一組特定樣式的地方重複使用它。

Mixins 甚至可以接受帶有設置默認值選項的參數。在下面的例子中，我們定義了一個 square mixin，然後用它來創建不同大小和顏色的正方形。

@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}

.small-blue-square {
  width: 20px;
  height: 20px;
  background-color: blue; 
}

.big-red-square {
  width: 300px;
  height: 300px;
  background-color: red;
}

使用 mixins 的另一種有效方法是，當一個屬性需要前綴才能在所有瀏覽器中工作時。

@mixin transform-tilt() {
  $tilt: rotate(15deg);

  -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: $tilt; /* IE 9 */
          transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover { 
  @include transform-tilt; 
}

.frame:hover {
  -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: rotate(15deg);  /* IE 9 */
  transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
}

4。擴展

我們將看到的下一個特性是 code>@extend，它允許您將一個選擇器的 CSS 屬性繼承到另一個選擇器。這與 mixins 系統的工作方式類似，但當我們想要在頁面上的元素之間創建邏輯連接時，這是首選。

當我們需要類似樣式的元素時，應該使用擴展，這些元素在某些細節上仍然存在差異。例如，讓我們製作兩個對話框按鈕 - 一個用於同意，一個用於取消對話框。

.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}

.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirm {
  background-color: #87bae1;
  float: left; 
}

.cancel {
  background-color: #e4749e;
  float: right; 
}

如果您查看代碼的 CSS 版本，您會看到 Sass 組合了選擇器，而不是一遍又一遍地重複相同的聲明，從而節省了我們寶貴的內存。

5。嵌套

HTML 遵循嚴格的嵌套結構，而在 CSS 中通常是完全混亂的。使用 Sass 嵌套，您可以以更接近 HTML 的方式組織樣式表，從而減少 CSS 衝突的可能性。

舉個簡單的例子，讓我們為包含多個鏈接的列表設置樣式：

ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }

  }

}

ul {
  list-style: none; 
}

ul li {
  padding: 15px;
  display: inline-block; 
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

非常整潔和防衝突。

6.操作

使用 Sass，您可以直接在樣式表中進行基本的數學運算，就像應用適當的算術符號一樣簡單。

$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}

.container {
  width: 800px; 
}

.column-half {
  width: 400px; 
}

.column-fifth {
  width: 160px; 
}

儘管 vanilla CSS 現在也以 calc() 的形式提供此功能，但 Sass 替代方案編寫起來更快，具有模 % 操作，並且可以應用於更廣泛的數據類型（例如顏色和字符串）。

7。函數

Sass 提供了一長串內置函數。它們服務於各種用途，包括字符串操作、與顏色相關的操作，以及一些方便的數學方法，例如 random() 和 round()。

為了展示一個更簡單的 Sass 函數，我們將創建一個使用 darken($color, $amount) 的快速片段 製作懸停效果。

$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}

a {
  padding: 10px 15px;
  background-color: #2196F3; 
}

a:hover {
  background-color: #0c7cd5; 
}

除了龐大的可用功能列表外，您還可以定義自己的選項。 Sass 也支持流控制，所以如果你願意，你可以創建相當複雜的行為。

結論

上面的一些特性將來會出現在標準 CSS 中，但它們還沒有完全出現。同時，預處理器是改善 CSS 編寫體驗的好方法，而 Sass 是一個不錯的選擇。

我們在這裡只介紹了表面，但 Sass 的內容遠不止這些。如果您想更熟悉它所提供的一切，請點擊以下鏈接：

• Sass 文檔
• Sass 函數的完整列表
• Sass Way 教程
• CSS 預處理器對比圖