在阅读本文之前，你是怎样优化网页的呢？大多数开发者的焦点集中于 JavaScript、图片、服务器配置、文件压缩合并，甚至是 CSS。虽然 HTML 是前端技术的核心之一，但却一直没有得到应有的重视。HTML 的体积日渐臃肿。目前，全球访问量前 100 的网站每个页面大概有 40kB 的大小，类似亚马逊和雅虎这样的网站，甚至每个页面包含了数千行的 HTML 代码。最近，youtube 主页的 HTML 代码量甚至达到了惊人的 3.5K 行（翻译本文时已达到了 4.8K 行）。

为了提高码农的开发效率，现在在线上有很多在线小工具，这些小工具可以帮助大家快速实现自己需要的效果，并且可以生成可用代码。前几天看到一个制作三角的小工具，尝试着使用Sass来将其转换成可用的混合宏。尝试成功，来说说怎么实现的。其实只要你有时间，很多小工具都可以用类似的方法来实现。

表单控件在网页设计中无疑是占有重要地位的。由于表单控件是用户频繁使用到的页面元素，所以有必要使用 Sass 来快速美化项目中的表单控件。

过去几周我讲解了可缩放矢量图形(SVG)的一些基础知识。首先，我展示了如何在HTML中嵌入SVG，接着讲解了如何创建SVG预定义的基础图形。为了让创建的图形显示出来，我在这两篇文章中都使用了填充和描边属性。今天我想要详细讲讲填充和描边以及它们的一些相关的属性。

在教学过程中的一个很重要的部分是，学生们通常都有很多非常新鲜的想法。而我们则倾向于思考要如何完成一项任务，也因此错过了很多可用的而且很酷的新技术。看看我们训练营第一个星期的项目，是一个简单的单页网站，用于演示对HTML和CSS的理解：使用语义化的标记语言和CSS来实现样式。我们的其中一个学生，Heather Banks，她曾经作为我的学生part-time参与过HTML/CSS课程，想要复制一个在Squarespace上看到的效果，周围的div元素似乎有被剪裁。

在 Sass 混合宏中，我们可以向其传递参数列表，便于快速地配置相关属性。如果定义的混合宏定义了参数，在实际调用就需要为每个参灵敏传递一个合理的值，否则就会出现错误提示。这往往强迫开发者为非必须的变量传值，甚至重置非必要的初始值。那么，怎么样才能避免必须为每一个变量传值 呢？这就是这篇文章要介绍的相关知识。

几天前的一个晚上，我在 Up Front Berlin 上就过去几年 Sass 的某些特性谈了谈自己的使用方法。点击这里可以查看当时的幻灯片。但就我个人而言，更乐意发表几篇笔记，深入地探讨相关的问题——本文就取材自这些笔记中的一些片段。我所探讨的焦点在 map 这种数据类型上，特别是使用 @content，@at-root 和 unique-id() 等指令合并 maps 所实现的奇妙方法。其中之一就是混合宏的设计模式，这一设计模式通过使用 @extend 指令和占位符选择器来解决 Sass 的一些实际问题。

Flexbox布局官方称之为CSS Flexible Box布局模块,他是CSS3中的一种新的布局模式。Flexbox可以控制未知容器元素的对齐方式，排列方向，排列顺序等，甚至是在未知大小的容器也能这样做。Flex容器的主要特点是能够修改其子元素（Flex item）的宽度或高度，使其在不同的屏幕尺寸中填补可用的空间。许多设计人员和开发人员发现使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局，也使整个开发过程更为简单。Flexbox布局算法基于水平或垂直的块或行内元素来布局。Flexbox布局常用于小的应用程序组件之中，而CSS Grid布局模块将应用于大规模的布局之中。

上周我开始了SVG的系列探讨，并通过不同的方法将SVG嵌入到HTML页面中。因为需要让示例能够在你的屏幕上显示，所以我创建了一个绿色的矩形。创建矩形的代码并不难理解，我并不打算详细讲解，所以现在来讲一下你能够创建的其它形状吧。我之前有大概介绍了一些简单的SVG图形，但是我觉得我还是需要把它们再过一遍，因为我之前理解得也不够全面，所以再复习一遍也可以帮助我更好地理解。

可缩放矢量图形（SVG）是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展，但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性，所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。