摘要：本文來自心譚博客譯文逐步替換，最新文章請(qǐng)見導(dǎo)航頁，歡迎交流翻譯說明這是一篇介紹現(xiàn)代核心特性的文章，并且借助進(jìn)行橫向?qū)Ρ?，充分體現(xiàn)了作為一門設(shè)計(jì)語言的快速發(fā)展以及新特性為我們開發(fā)者帶來的強(qiáng)大生產(chǎn)力。

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

這是一篇介紹現(xiàn)代 css 核心特性的文章，并且借助 sass 進(jìn)行橫向?qū)Ρ龋浞煮w現(xiàn)了 css 作為一門設(shè)計(jì)語言的快速發(fā)展以及新特性為我們開發(fā)者帶來的強(qiáng)大生產(chǎn)力。

第一次嘗試翻譯技術(shù)文，為了讓文章更通俗易懂，很多地方結(jié)合了文章本意和自己的說話風(fēng)格。另外，時(shí)間有限水平有限，難免有些失誤或者翻譯不恰當(dāng)?shù)牡胤?，歡迎指出討論。

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

我每年都要重新搭建和設(shè)計(jì)我的網(wǎng)站，這是一個(gè)非常不錯(cuò)的方式去跟進(jìn) HTML/CSS 的最新進(jìn)展、開發(fā)模式和網(wǎng)站生成器。在上個(gè)月，我發(fā)布了新版本：從 Jekyll 和 GithubPages 遷移到 Eleventy 和 Netlify。

一開始，我并沒有移除代碼中所有的 sass 代碼。這本不是我計(jì)劃中的事情，但隨著我不斷查看 sass 代碼，我一直在思考：它們是否給網(wǎng)站帶來了價(jià)值，還是僅僅增加了復(fù)雜度和依賴性(特指對(duì)：scss)？隨著這年 css 的發(fā)展，曾經(jīng)讓我使用 sass 的原因似乎不那么重要了。

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

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

下面是我用 sass 做的事情：

布局

變量

Typography

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

我一直記得我第一次嘗試用 css 創(chuàng)建一個(gè)響應(yīng)式網(wǎng)格布局的時(shí)候，那要為每列創(chuàng)建一個(gè)對(duì)應(yīng)的類名，然后再用語義化不強(qiáng)的類名（比如 ?col-span-1? 和 ?col-span-4?）來標(biāo)記它。

.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? 變量，來創(chuàng)造更靈活的布局。

下面是我寫的第一個(gè)基于 ?mixin? 的網(wǎng)格布局：

@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? 的介紹，我們不再需要用語義化不強(qiáng)的類名或者 sass 或者其他預(yù)處理器，來完成網(wǎng)格布局這項(xiàng)功能。Rachel Andrew 說這種方法是最好的：

你不再需要一種工具來幫助你創(chuàng)建網(wǎng)格布局，因?yàn)槟悻F(xiàn)在就擁有它。

下面的的代碼基于內(nèi)容的寬度范圍，創(chuàng)建了一個(gè)響應(yīng)式布局，并且不再需要預(yù)設(shè)和計(jì)算設(shè)備的大小。

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

從 sass 創(chuàng)建網(wǎng)格布局轉(zhuǎn)變?yōu)?css 原生網(wǎng)格布局，是一個(gè)“無痛”體驗(yàn)。它不僅僅能夠減少對(duì) sass 的依賴，還可以讓我編寫更靈活的代碼，激發(fā)更多的設(shè)計(jì)思路以及不再使用媒體查詢?cè)O(shè)計(jì)網(wǎng)站。

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

變量就是一個(gè)可能變化的值，我一直不知道 css 中有這個(gè)功能。今天我的大多數(shù)項(xiàng)目都遵循 ?ITCSS methodology?，并且創(chuàng)建一個(gè)配置文件專門用來存放變量定義。通常，我會(huì)為字體樣式、顏色和媒體查詢?cè)O(shè)置變量。

之前 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}
);

使用變量或者映射讓我的網(wǎng)站能夠快速和簡(jiǎn)單地應(yīng)對(duì)大的改動(dòng)。它也預(yù)防了在大型代碼項(xiàng)目中過分堆積復(fù)雜的外形、顏色變量，特別是 hover 懸浮的動(dòng)畫、引用、邊框等等。

例如下面場(chǎng)景：

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

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

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

能夠被 sass 的變量和顏色相關(guān)的內(nèi)置函數(shù)重寫：

$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 自帶的變量能做的事情更多，不僅僅是替換靜態(tài)字面量，它可以實(shí)時(shí)動(dòng)態(tài)計(jì)算（而不僅僅是編譯構(gòu)建的時(shí)候靜態(tài)替換）。它允許被 js 修改，并且不需要在代碼外面再包裹一層 ?mixins? 和 ?funtions?。

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

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

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

當(dāng)然，sass 中對(duì)顏色的一些內(nèi)置函數(shù)在 css 中也可以使用：

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

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

不幸的是，這（顏色相關(guān)內(nèi)置函數(shù)）一直在處在提案階段。我決定還是手動(dòng)定義顏色變量來替換它（提案中的方案）。

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

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

如果你執(zhí)意使用他們，那么這個(gè)包含了很多 css 顏色函數(shù)功能的 ?PostCSS? 項(xiàng)目能夠幫助到你。

最后，對(duì)于排版，在之前的代碼中，我是用 sass 去創(chuàng)建響應(yīng)式排版和布局。下面展示的 ?mixin? 的用法讓我能輕易地處理不同大小的屏幕與設(shè)備：

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

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

現(xiàn)在，我用原生的 css 的功能來進(jìn)行這些計(jì)算：

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

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

CSS 正在朝向更具內(nèi)涵的規(guī)范發(fā)展，在 css 的 ?grid? 特性中，有 ?flexbox? 以及 ?min-content?、?max-content?、?fit-content? 這些屬性，而在 Css Grid Layout Module Level2 中也準(zhǔn)備加入的新布局：?Subgrid?。

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

?Star Github / Read Blog?

《前端系列文章》

JavaScript 基礎(chǔ)知識(shí)梳理(下)

前端面試中常考的源碼實(shí)現(xiàn)

ES6 篇

ES6 重難點(diǎn)整理

談?wù)?promise/async/await 的執(zhí)行順序與 V8 引擎的 BUG

HTML5 篇

websocket 學(xué)習(xí)和群聊實(shí)現(xiàn)

ServiceWorker 離線緩存實(shí)戰(zhàn)

原生拖拽事件

《設(shè)計(jì)模式手冊(cè)》

單例模式

訂閱-發(fā)布模式

橋接模式

備忘錄模式

模板模式

抽象工廠模式

......

《Webpack4系列》

(十二)：處理第三方 JavaScript 庫

(十三)：自動(dòng)生成 HTML 文件

(十四)：Clean Plugin and Watch Mode

(十五)：開發(fā)模式與 webpack-dev-server

(十六)：開發(fā)模式和生產(chǎn)模式·實(shí)戰(zhàn)

?Star Github / Read Blog?