Stylus 与响应式
这一章内容不多。正如前文所说，设计同事会把切好的页面交给我，里面大部分样式都写好了，我要做的只是根据需要变动一下。
会写这一章主要是看到还有同学在挣扎着使用 Less 和 Sass，前者语法较弱，后者需要依赖 Ruby，而 Ruby 对于墙内的同学来说，需要解决各种换源的问题——虽然 Sass 语法比 Less 强一些，不过也只是强一些而已，还是不如 Stylus。
Stylus 是基于 Node.js 开发的预处理语言，功能更强，使用也更方便。要在项目中配合 Webpack 使用，只需要配置合适的 loader 就可以了（关于串连 loader，可以看前面的 Webpack 介绍）：
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
}
}
Stylus 的优势在于：
- 语法最简单，
;:{}都可以不要 - 表达式支持全面
- 可以方便的和其它 JS 库集成
Stylus 其实不需要怎么学习，你可以把它当成一大堆 CSS 语法糖，直接用就行了。不过如果你真想多了解一些的话，不妨看下我在友台做的一次分享：前端必备技能：CSS 预处理工具 Stylus 详解，里面有一些技巧和展示。
响应式
响应式也是很多同学会问到的问题。其实我觉得响应式非常简单，只是“响应式”这个名字实在太不常见了，听起来好像包含着某种特殊的、高深的含义，其实大部分时候我们只是使用 @media 进行媒体查询，根据不同的设备不同的参数呈现不一样的布局而已。
我并不是说“响应式设计（Responsive Design)”没什么技术含量，对页面和组件进行设计，使它们在不同设备不同分辨率下都能提供最好的用户体验，这是非常重要非常有价值也非常有难度的工作。只是在前端实现方面，确实没什么特别多值得一提的难点。
如果你想学习响应式，那么我建议你先看一下这个网站：WrapBootstrap，这是个网站卖模板的网站，上面的模板都是基于 Bootstrap 开发的。你可以随便打开一个模板，然后用浏览器的响应式开发工具切换一下分辨率，看看这些卖了成千上万份的模板，针对不同分辨率是如何做适配的。
简单帮大家总结一下，常见的响应式适配主要针对：
- 顶部导航：桌面默认展开，移动端自动切换到汉堡式
- 侧边栏导航：桌面默认展开，移动端默认收起，右滑或按钮唤出
- 两/三列内容：变一列
- 4+ 列：通常变成两列
- 横向 slide：支持手势切换
- 表格：表格在移动端的适配稍微麻烦点，有多种不同方案，大家可以根据需要选择。
本项目介绍
本次项目中，设计同事也选择了 Bootstrap 4.3.1 作为基础框架，在上面开发了静态网站。我拿到之后，就沿用了大部分样式，直接使用 Stylus 的 @import：
@import './screen.css';
// 我的其它样式
我习惯把样式拆分成若干个小模块，在主样式 screen.styl 里引用，这样，可以比较方便的在不同项目中共享代码，将来想提取组件的话，也比较方便。我的常用结构是这样的：
styl # 根目录
├── core
│ ├── body.styl # html，body 的样式
│ ├── global.styl # 全局有效的样式
│ ├── layout.styl # 布局相关样式
│ └── variable.styl # 配色、间距等
├── component # 组件样式
│ ├── button.styl
│ ├── modal.styl
│ ├── navbar.styl
│ └── ....
├── adapter # 调整其它组件的样式
│ ├── bootstrap.styl
│ ├── swiper.styl
│ ├── media-element.styl
│ └── ....
├── framework # 以首页为主的框架样式
│ ├── header.styl
│ ├── footer.styl
│ ├── banner.styl
│ └── ....
├── lang # 特定语言专属页面的样式
│ ├── cn.styl
│ ├── en.styl
│ └── ....
├── pages # 各页面的样式
│ ├── about.styl
│ ├── contact.styl
│ └── ....
├── ....
└── screen.styl