摘要：本文來自心譚博客譯文逐步替換，最新文章請見導航頁，歡迎交流翻譯說明這是一篇介紹現代核心特性的文章，并且借助進行橫向對比，充分體現了作為一門設計語言的快速發展以及新特性為我們開發者帶來的強大生產力。

本文來自心譚博客·「譯文」逐步替換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 的一些新的特性，那些針對特定屏幕大小的代碼（媒體查詢）沒有必要，因此被移除了。

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

下面是我用 sass 做的事情：

布局

變量

Typography

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

我一直記得我第一次嘗試用 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 的 ?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? 屬性的支持更少，但可以通過查詢規范支持來提前規避。

變量就是一個可能變化的值，我一直不知道 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? 項目能夠幫助到你。

最后，對于排版，在之前的代碼中，我是用 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?