【译】逐步替换Sass

栏目: CSS · 发布时间: 5年前

内容简介：这是一篇介绍现代css核心特性的文章，并且借助sass进行横向对比，充分体现了css作为一门设计语言的快速发展以及新特性为我们开发者带来的强大生产力。第一次尝试翻译技术文，为了让文章更通俗易懂，很多地方结合了文章本意和自己的说话风格。另外，时间有限水平有限，难免有些失误或者翻译不恰当的地方，欢迎指出讨论。英文原文地址：

这是一篇介绍现代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的一些新的特性，那些针对特定屏幕大小的代码（媒体查询）没有必要，因此被移除了。

Sass解决了什么问题？

大概5、6年前，我第一次了解到sass的时候，我是有些换衣的。随着我搭建越来越多的响应式web应用，我才意识到借助sass的 functions 和 mixins 可以大大提高代码复用。显而易见的是，随着设备、视图窗口和主题等场景的变化，使用（sass的）变量让代码迁移的成本更低。

下面是我用sass做的事情：

布局
变量
Typography

1) 布局

布局一直是css中让人困惑的地方。而响应式布局正是我最初决定使用Sass去创建css布局的重要原因。

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

小团队构建大网站：中小研发团队架构实践

张辉清等 / 电子工业出版社 / 2019-1 / 69

《小团队构建大网站：中小研发团队架构实践》结合作者近几年的工作经验，总结了一套可直接落地、基于开源、成本低、可快速搭建的中小研发团队架构实践方法。《小团队构建大网站：中小研发团队架构实践》共5篇22章，开篇是本书的导读；架构篇是设计思想的提升，包括企业总体架构、应用架构设计、统一应用分层等；框架篇主讲中间件和工具的使用，包括消息队列、缓存、Job、集中式日志、应用监控和微服务等；公共应用篇是技术与......一起来看看《小团队构建大网站：中小研发团队架构实践》这本书的介绍吧!

码农工具