刘月林 | Sktech to CSS 实例一复盘

Step 1

下载 Sketch 最新版本和汉化插件：

• 推荐地址：http://www.sketchcn.com/
• 链接：https://pan.baidu.com/s/1TwPZOHktjUvwPhi0o4hd1w
• 密码：3xrw

---

Step 2

1. 打开 Sketch, 新建一个文档： setup.jpg

2. 使用Sketch左上角 Insert 按钮插入一个面板（快捷键A),在右侧 Material Design 选择 Desktop:

   setup.gif 并根据自己的需要来调整尺寸.
   
   

3. 使用Sketch左上角 Insert 按钮插入矩形基本元素进行原型制作（快捷键R）

   
   Desktop_Slice.png

4. 最后完成 mobile 的原型制作,方法同上

   
   Frame.png

---

Step 3

1. 新建 Landing Page页面,插入画板,选择Desktop,利用标尺来完成布局(control + r 显示标尺，control + l 显示布局)
2. 新建 Mobie 画板，按照 Desktop 画板的内容完成布局
3. 新建 Styles 页面，完成样式的自定义

4. 同上述步骤，依照 Desktop 的流程完成 Mobile 的设计

   
   Desktop.png
   Mobile.png

---

Step 4

1. 在 index.html 里完成内容的填充
2. 安装CSS拓展语言Sass

3. 使用Sass，根据 Sketch 里样式的数据完成样式的 CSS 定义

   
   

---

Step 5

在Sass中使用@media完成响应式布局

$med

$sml

Step 6

Push到 Github 远端

• 源码地址
• 参考视频

刘月林
写于湖北沙洋
2018/08/01