专注于前端和算法系列的干货分享，欢迎关注(???)：《微信公众号：新坛博客》|新坛网|GitHub翻译Description这是一篇介绍现代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函数和混合可以大大提高代码重用。很明显，随着设备、视口和主题等场景的变化，使用（sass的）变量可以降低代码迁移的成本。下面是我用sass做的：LayoutVariablesTypography1)LayoutLayout一直是css中比较混乱的地方。响应式布局是我决定首先使用Sass创建css布局的一个重要原因。使用sass，我一直记得第一次尝试用css创建响应式网格布局时，需要为每一列创建一个对应的类名，然后使用语义不强的类名（比如col-span-1和col-span-4)来标记它。.col-span-3{浮动：左；宽度：24%；margin-left:1%;}.col-span-4{float:left;宽度：32.3%；margin-left:1%;}.col-span-5{float:left;宽度：40.6%；margin-left:1%;}有了sassmixin和变量的帮助，你就不能再像上面这样写类名了。并且可以通过更改$gridColumns变量来创建更灵活的布局。这是我写的第一个基于mixin的网格布局：@mixingrid($colSpan,$gridColumns:12,$margin:1%){$unitWidth:$gridColumns/$colSpan;向左飘浮;宽度：(100-$unitWidth*$margin)/$unitWidth；margin:0$margin/2;}导入方式如下：.sidebar{@includegrid(3);}.main-content{@includegrid(9);}@mediaonlyscreenand(max-width:480px){.sidebar{@includegrid(12);}.main-content{@includegrid(12);}}CSS网格布局通过在css中引入grid，我们不需要再使用弱语义的类名或者sass等预处理器来完成网格布局的功能。RachelAndrew说这种方法是最好的：你不再需要一个工具来帮助你创建网格布局，因为你现在有了它。以下代码根据内容的宽度范围创建响应式布局，不需要预先设置和计算设备的尺寸。.project{显示：网格；网格模板列：重复（自动填充，minmax（12em，1fr））；grid-gap:1em;}创建网格布局从sass到css原生网格布局，是一种“无痛”体验。它不仅减少了我对sass的依赖，还让我可以在不使用媒体查询的情况下编写更灵活的代码，激发更多的设计思维和设计网站。但最明显的缺点是浏览器兼容性。目前只有最新的浏览器支持Grid，包括IE11和IE10。对自动填充和自动调整属性的支持较少，但可以通过查询规范支持及早规避。2)变量变量是可以改变的值。一直不知道css中有这样的功能。我今天的大部分项目都遵循ITCSS方法论，并创建一个专门用于存储变量定义的配置文件。通常，我为字体样式、颜色和媒体查询设置变量。以前的sass方法：/*COLORS*/$colors:("black":#2a2a2a,"white":#fff,"grey-light":#ccc7c3,"grey-dark":#2a2a2a,"accent":#ffa600,"off-white":#f3f3f3,"sky-blue":#ccf2ff);/*断点*/$breakpoints:("break-mobile":290px,"break-phablet":480px,"break-tablet":768px,"break-desktop":1020px,"break-wide":1280px);/*排版*/$font-stack:(decorative:#{"oswald",Helvetica,sans-serif},general:#{"HelveticaNeue",Helvetica,Arial,sans-serif});使用变量或映射可以让我的网站快速轻松地响应大的变化。它还可以防止在大型代码项目中过度堆积复杂的形状、颜色变量，尤其是悬停动画、引用、边框等。例如下面的场景：.button{background-color:#4caf50;/*绿色*/}.button:hover{background-color:#3f8c42;/*深绿色*/}.button:active{background-color:#266528;/*DarkerGreen*/}可以被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和functions。:root{--button-color:#4caf50;}.button{背景颜色: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用法允许我轻松处理不同尺寸的屏幕和设备：@mixintypography($size){font-size:$size;@includemq(break-desktop){字体大小：$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这些属性，新的也计划在CssGridLayoutModuleLevel2Layout:Subgrid中加入。这些新特性让原生css更具吸引力！更多文章专注于前端和算法系列干货分享，欢迎关注(???)
