calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog，希望对大家有所帮助。

CSS中自适应布局是一种常见的布局方式，但当浏览器视窗缩小一定程度的时候，内容会挤跨，特别是侧边栏。CSS3中新增加了一个calc()特性，可以让浏览器根据表达式自动计算，真正达到自适应的布局效果。

网格系统对于Web前端人员来说不是一个陌生的话题了，在w3cplus上介绍网格系统的教程并不少，不过这些网格系统都有其类似之处。在HTML中为了能应用好网格，都需要添加一些类名，而在样式中，不管你用了几列网格，都有一大串的样式代码。这让一个有代码洁癖的人员来说，总觉得不爽。幸好，CSS预处理器的出现，如Sass。可以让你的代码变得更简单一些，但和以前的网格也极其类似。有时试想，有没有更好的呢？今天看到Sebastian Ekström的Create a CSS grid using calc()觉得很有意思，通过calc()和Sass的结合，生成需要的网格。希望此篇文章对大家有所启发。