「翻譯」逐步替換Sass

時間 2019-12-06

標籤翻譯逐步替換 sass 简体版

原文原文鏈接

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

翻譯說明

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

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

英文原文地址：cathydutton.co.uk/posts/why-i…前端

正文開始

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

一開始，我並無移除代碼中全部的 sass 代碼。這本不是我計劃中的事情，但隨着我不斷查看 sass 代碼，我一直在思考：它們是否給網站帶來了價值，仍是僅僅增長了複雜度和依賴性(特指對：scss)？隨着這年 css 的發展，曾經讓我使用 sass 的緣由彷佛不那麼重要了。java

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

Sass 解決了什麼問題？

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

下面是我用 sass 作的事情：es6

佈局
變量
Typography

1) 佈局

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

使用 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 是目前只在最新瀏覽器中被支持，包括 IE十一、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 更有吸引力！