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