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原生各有利弊，两者都在不断发展，了解各自的特性，才能在具体的应用场景中更好的使用。