CSS：爲何我再也不使用 Sass（譯）

本文總覽

前端時間學習了 Sass，像 Sass 這樣的預處理器優勢在於：變量及 Mixin 能夠減小 css 中的重複問題；嵌套使父子關係更加清晰；繼承能夠避免代碼重複問題；便捷的函數功能和自定義函數等等。

可是呢，偶然間看到這篇文章，why-i-stopped-using-sass，做者說明了再也不使用 Sass 的緣由，好奇心使我點了進去，並進行了渣翻。文中做者說明了用 Sass 解決了哪些問題，爲何後來不用 Sass，下文會詳細闡述。

本文從一篇博文出發，轉述文章做者的觀點，最後再加上一點個人理解。

爲何我再也不使用 Sass（20190101）

背景：文章做者堅持每一年最少重建一次網站，在最近的重建中，他一開始沒有想要將Sass代碼移除，但越是看本身的Sass代碼，越是產生了懷疑，Sass 的使用是在爲網站增色呢仍是在徒增沒必要要的複雜度和依賴。CSS 發展了不少年，起初用 Sass 解決的問題，如今看來都不是問題了。

Sass解決了什麼問題

文章做者經常使用Sass解決佈局、變量、排版的問題。

佈局 Layout

使用 Sass 以前

.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

定義 mixin

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

使用 mixin

.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

CSS Grid 的引入使得佈局變得簡單，再也不須要使用上面的方式構建網格系統。

如下的代碼實現了根據內容的最大最小寬度適配變化的響應式佈局，而不是根據預設的設備大小。

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

用 Grid CSS 作佈局的侷限性在於瀏覽器兼容。Grid 目前支持大部分的現代瀏覽器 和IE10+，auto-fill 和 auto-fit 屬性兼容性更低，能夠經過 @supports 判斷兼容。

變量 Variables

**變量是可變化的值，對 CSS 來講變量是使用到才知道值是什麼。**做者大部分項目遵循 ITCSS 標準，將全局變量放在 setting 文件中。一般全局變量有字體，顏色，媒體查詢。

/* 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}
);
複製代碼

這樣使用變量使網站大幅改動變得快速簡單。

使用 Sass 以前

.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 變量

CSS 自定義變量不只能夠替換預處理器變量，還能夠動態更新（JS）。CSS變量教程

CSS 變量甚至能夠像 Sass 對顏色進行操做，可是這種操做仍處於草案階段，暫時能夠用不一樣顏色代替。

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

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

文字排版 Typography

以前的代碼中，做者使用Sass作響應式排版和間距，使用相似下面代碼的 mixin：

@mixin typography($size) {
  font-size: $size;
  @include mq(break-desktop) {
    font-size: $size * 1.2;
  }
}
複製代碼

現在可使用**原生 CSS 中的 calc 和視口單位(viewport units)**來實現這些計算。

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

body {
  font-size: var(--font-size);
}
複製代碼

CSS 正在朝着內容主導的方向發展，Grid/flexbox/大小調整屬性(min-content/max-content/fit-content)還有之後的 SubGrid/Layout Model Level 2等。這些都讓原生 CSS 更具吸引力。

以上是譯文內容，做者使用原生 CSS 實現了原來用 Sass 實現的功能，更加簡潔方便，惟一的侷限性是兼容性問題，但這點將來終會解決，同時 CSS 也正在產生更多使用的特性，使其更具吸引力。

個人想法

我認爲 Sass 存在它自身的優點，好比 mixin、繼承、佔位符等用於減小重複樣式代碼，使樣式間關係清晰；靈活的變量插值（相比較CSS變量只能做爲屬性值或變量值使用）；數據類型多樣；邏輯控制（判斷、循環等）；功能函數和自定義函數等等，但Sass的使用須要 Ruby 的依賴，且須要編譯後成 css 後使用，確實會給項目增添依賴。

做者用到的 CSS 原生方法，簡潔方便，但部分存在兼容性的問題，目前還沒有解決，使用時須要進行兼容性判斷。

Sass 等 CSS 預處理和 CSS 原生各有利弊，二者都在不斷髮展，瞭解各自的特性，才能在具體的應用場景中更好的使用。