2、利用 Sass 实现响应式网页设计

利用 Sass 实现响应式网页设计

在掌握使用 HTML5 和 CSS3 进行响应式网页设计之前，我们需要了解 CSS 预处理器，特别是 Sass。在本文中，所有 CSS 都将以 SCSS 格式的 Sass 编写，这种编写方式极大地改进了传统的 CSS 编写。

1. Sass 简介

CSS 预处理器如 Sass、LESS 和 Stylus 为网页和移动应用设计师与开发者带来了新的强大功能。例如下面的代码展示了 Sass 的嵌套特性：

.navigation-bar {
    display: flex;
    li {
        padding: 5px 10px;
    }
}

编译后的 CSS 代码如下：

.navigation-bar {
    display: flex; 
}
.navigation-bar li {
    padding: 5px 10px;
}

2. 下载示例代码

可以从 http://www.packtpub.com 账户下载示例代码文件。若在其他地方购买，可访问 http://www.packtpub.com/support 注册获取文件。

3.