「翻译」逐步替换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 更有吸引力！