翻译说明

这是一篇介绍现代 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 做的事情：

布局

布局一直是 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%;
}
Powered by Fruition