「翻譯」逐步替換Sass

本文來自心譚博客·「譯文」逐步替換Sass，最新文章請見導航頁，歡迎交流✿✿ヽ(°▽°)ノ✿

翻譯說明

這是一篇介紹現代 css 核心特性的文章，並且藉助 sass 進行橫向對比，充分體現了 css 作爲一門設計語言的快速發展以及新特性爲我們開發者帶來的強大生產力。

第一次嘗試翻譯技術文，爲了讓文章更通俗易懂，很多地方結合了文章本意和自己的說話風格。另外，時間有限水平有限，難免有些失誤或者翻譯不恰當的地方，歡迎指出討論。

英文原文地址：https://cathydutton.co.uk/posts/why-i-stopped-using-sass/

正文開始

我每年都要重新搭建和設計我的網站，這是一個非常不錯的方式去跟進 HTML/CSS 的最新進展、開發模式和網站生成器。在上個月，我發佈了新版本：從 Jekyll 和 GithubPages 遷移到 Eleventy 和 Netlify。

一開始，我並沒有移除代碼中所有的 sass 代碼。這本不是我計劃中的事情，但隨着我不斷查看 sass 代碼，我一直在思考：它們是否給網站帶來了價值，還是僅僅增加了複雜度和依賴性(特指對：scss)？隨着這年 css 的發展，曾經讓我使用 sass 的原因似乎不那麼重要了。

其中一個例子就是我已經移除了媒體查詢。當我瞭解到 CSS 的一些新的特性，那些針對特定屏幕大小的代碼（媒體查詢）沒有必要，因此被移除了。

Sass 解決了什麼問題？

大概 5、6 年前，我第一次瞭解到 sass 的時候，我是有些換衣的。隨着我搭建越來越多的響應式 web 應用，我才意識到藉助 sass 的  functions  和  mixins  可以大大提高代碼複用。顯而易見的是，隨着設備、視圖窗口和主題等場景的變化，使用（sass 的）變量讓代碼遷移的成本更低。

下面是我用 sass 做的事情：

• 佈局
• 變量
• Typography

1) 佈局

佈局一直是 css 中讓人困惑的地方。而響應式佈局正是我最初決定使用 Sass 去創建 css 佈局的重要原因。

使用 sass

我一直記得我第一次嘗試用 css 創建一個響應式網格佈局的時候，那要爲每列創建一個對應的類名，然後再用語義化不強的類名（比如  col-span-1  和  col-span-4 ）來標記它。

.col-span-3 {
  float: left;
  width: 24%;
  margin-left: 1%;
}

.col-span-4 {
  float: left;
  width: 32.3%;
  margin-left: 1%;
}

.col-span-5 {
  float: left;
  width: 40.6%;
  margin-left: 1%;
}

藉助 sass 的  mixin  和變量，能夠不再編寫像上面那樣的類名。並且能夠通過改變  $gridColumns  變量，來創造更靈活的佈局。

下面是我寫的第一個基於  mixin  的網格佈局：

@mixin grid($colSpan, $gridColumns: 12, $margin: 1%) {
  $unitWidth: $gridColumns / $colSpan;
  float: left;
  width: (100 - $unitWidth * $margin) / $unitWidth;
  margin: 0 $margin/2;
}

引入方法如下：

.sidebar {
  @include grid(3);
}

.main-content {
  @include grid(9);
}

@media only screen and (max-width: 480px) {
  .sidebar {
    @include grid(12);
  }

  .main-content {
    @include grid(12);
  }
}

CSS 網格佈局

通過 css 的  grid  的介紹，我們不再需要用語義化不強的類名或者 sass 或者其他預處理器，來完成網格佈局這項功能。Rachel Andrew 說這種方法是最好的：

你不再需要一種工具來幫助你創建網格佈局，因爲你現在就擁有它。

下面的的代碼基於內容的寬度範圍，創建了一個響應式佈局，並且不再需要預設和計算設備的大小。

.project {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
  grid-gap: 1em;
}

從 sass 創建網格佈局轉變爲 css 原生網格佈局，是一個“無痛”體驗。它不僅僅能夠減少對 sass 的依賴，還可以讓我編寫更靈活的代碼，激發更多的設計思路以及不再使用媒體查詢設計網站。

但是最明顯的不足是瀏覽器的兼容性。Grid 是目前只在最新瀏覽器中被支持，包括 IE11、IE10。對  auto-fill  和  auto-fit  屬性的支持更少，但可以通過查詢規範支持來提前規避。

2) 變量

變量就是一個可能變化的值，我一直不知道 css 中有這個功能。今天我的大多數項目都遵循  ITCSS methodology ，並且創建一個配置文件專門用來存放變量定義。通常，我會爲字體樣式、顏色和媒體查詢設置變量。

之前 sass 的做法：

/* COLORS */
$colors: (
  "black": #2a2a2a,
  "white": #fff,
  "grey-light": #ccc7c3,
  "grey-dark": #2a2a2a,
  "accent": #ffa600,
  "off-white": #f3f3f3,
  "sky-blue": #ccf2ff
);

/* BREAKPOINTS */
$breakpoints: (
  "break-mobile": 290px,
  "break-phablet": 480px,
  "break-tablet": 768px,
  "break-desktop": 1020px,
  "break-wide": 1280px
);

/* TYPOGRAPHY */
$font-stack: (
  decorative: #{"oswald",
  Helvetica,
  sans-serif},
  general: #{"Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif}
);

使用變量或者映射讓我的網站能夠快速和簡單地應對大的改動。它也預防了在大型代碼項目中過分堆積複雜的外形、顏色變量，特別是 hover 懸浮的動畫、引用、邊框等等。

例如下面場景：

.button {
  background-color: #4caf50; /* Green */
}

.button:hover {
  background-color: #3f8c42; /* Dark Green */
}

.button:active {
  background-color: #266528; /* Darker Green */
}

能夠被 sass 的變量和顏色相關的內置函數重寫：

$button-colour: #4caf50;

.button {
  background-color: $button-colour;
}

.button:hover {
  background-color: darken($button-colour, 20%);
}

.button:active {
  background-color: darken($button-colour, 50%);
}

到底有什麼不同？

css 自帶的變量能做的事情更多，不僅僅是替換靜態字面量，它可以實時動態計算（而不僅僅是編譯構建的時候靜態替換）。它允許被 js 修改，並且不需要在代碼外面再包裹一層  mixins  和  funtions 。

:root {
  --button-color: #4caf50;
}

.button {
  background-color: var(--button-color);
}

header .button {
  --button-color: #000000;
  background-color: var(--button-color);
}

當然，sass 中對顏色的一些內置函數在 css 中也可以使用：

:root {
  --button-color: #4caf50;
}

.button:hover {
  color: color-mod(var(--button-color) tint(50%));
}

不幸的是，這（顏色相關內置函數）一直在處在提案階段。我決定還是手動定義顏色變量來替換它（提案中的方案）。

.button {
  background: var(--colour-dark);
}

.button:hover {
  background: var(--colour-bright);
  text-decoration: underline;
}

如果你執意使用他們，那麼這個包含了很多 css 顏色函數功能的  PostCSS  項目能夠幫助到你。

3) 網頁排版

最後，對於排版，在之前的代碼中，我是用 sass 去創建響應式排版和佈局。下面展示的  mixin  的用法讓我能輕易地處理不同大小的屏幕與設備：

@mixin typography($size) {
  font-size: $size;

  @include mq(break-desktop) {
    font-size: $size * 1.2;
  }
}

現在，我用原生的 css 的功能來進行這些計算：

:root {
  --font-size: calc(18px + 0.25vw);
}

body {
  font-size: var(--font-size);
}

展望

CSS 正在朝向更具內涵的規範發展，在 css 的  grid  特性中，有  flexbox  以及  min-content 、 max-content 、 fit-content  這些屬性，而在 Css Grid Layout Module Level2 中也準備加入的新佈局： Subgrid 。

這些新的特性都讓原生的 css 更有吸引力！

更多文章

⭐Star Github / Read Blog⭐

《前端系列文章》

• JavaScript 基礎知識梳理(下)
• 前端面試中常考的源碼實現

• ES6 篇

  • ES6 重難點整理
  • 談談 promise/async/await 的執行順序與 V8 引擎的 BUG

• HTML5 篇

  • websocket 學習和羣聊實現
  • ServiceWorker 離線緩存實戰
  • 原生拖拽事件

《設計模式手冊》

• 單例模式
• 訂閱-發佈模式
• 橋接模式
• 備忘錄模式
• 模板模式
• 抽象工廠模式
• ......

《Webpack4系列》

• (十二)：處理第三方 JavaScript 庫
• (十三)：自動生成 HTML 文件
• (十四)：Clean Plugin and Watch Mode
• (十五)：開發模式與 webpack-dev-server
• (十六)：開發模式和生產模式·實戰

⭐Star Github / Read Blog⭐