Ratchet是一款使用HTML、CSS和JavaScript用来制作移动网页或App的前端框架。目前最新版本是Ratchet v2.02。从今天开始我们一起来看如何使用Ratchet框架以及现成的组件制作移动网页或者app。首先向大家介绍Ratchet的环境配置与及安装。并向大家展示了使用Ratchet制作的一个简单的移动页面效果。
图片占位符，我们最常用的方案就是留空白区域，或者使用空的div标签来模拟，甚至使用一张背景图片来做。但这些方案都不是一个完美的方案，那么什么是完美的方案呢？今天我们通过CSS3的渐变来实现图像的占位符功能，这种方案既让你的代码更为干净，而且还可以帮你减少HTTP的请求数。最后还通过使用Sass让你实现自动化功能。感兴趣的同学请点击阅读正文。
在这个迷你系列的文章里，我将解释viewports和多种重要的HTML标签元素的宽度是如何工作的，例如<html>标签。同样也会解释window和screen的宽度问题。第一部分主要关于桌面（pc）浏览器，基本目的在于为移动端（mobile）浏览器上，本话题的讨论创建舞台。绝大多数web开发人员已经对pc的概念有了直观的认识。mobile拥有相同的概念，但是更加复杂。如你所知，一个友好的预热将极大的帮助你理解mobile浏览器。
<html>
CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果，而不喜欢说其是问题)并不是常陌生，而且很多同学都似乎有碰到过，也经常体验过。甚至在很多前端面试中也常被考官问到，有的时候还直接被考官给秒杀了。早前在水平垂直居中系列、八种创建等高列布局和如何将页脚固定在页面底部几篇文章中也或多或少介绍过。今天老调重谈，用几种新方法和大家探讨这几个效果，希望能帮助大家开拓思维。
Sass的数据类型可以说是一个大家庭了，其数据类型中的数字、字符串、列表、颜色和布尔型，涵盖了大多数我们的需求。但是，正如一个框架开始的演变，在这个数据类型中还缺少一个关键性的工具：关联数组。
Sass的控制命令是创建库和重复使用代码库的一个基础，使用好Sass，需要掌握好Sass的控制命令，只有掌握了这些，你才能进入Sass的下一个层次的学习。
新发布的Sass 3.3版本，将Source Maps正式纳入了Sass中。这也成为Sass新版本的一大亮点，一大新功能。让广大Sass爱好者可以直接在浏览器中更容易调试自己的代码和Debug相关操作。其实早在2013年七月份Umar Hansa在《Developing With Sass and Chrome DevTools》就详细介绍了如何使用Sass的Source Maps功能帮助大家在浏览器中更好的调试SCSS(或Sass)代码。今天将老调重谈，通过图解的方式向大家介绍如何在Chrome和Firefox浏览器中实现Sass3.3的Source Maps特性。
在CSS中没有逻辑的概念，所以很多程序员不太喜欢。而在CSS的预处理器语言中植入了类似程序语言的功能。比如说一些指令“@if”、“@for”、“@each”、"@while"等。而在Sass中也同样具有这些指令。借助这些指令可以让你编译出比"@extend"和"@mixin"更精简的CSS。那么在这篇文章中主要用来帮助一些从未接过这些指令的同学有所帮助和了解。
多次被问及Sass在项目中运用的时候要如何管理自己的文件？或许每个人都有各自的想法，也略有不同，也有各自的经验。今天根据Hugo Giraudel的《Architecture for a Sass Project》一文所译，向大家介绍了如何在Sass项目中管理自己的文件。主要目的是告诉大家怎么去想，并不是告诉大怎么做。我想这一点更切合实际。
Sass中提供多种方法来共用相同的CSS代码。你可以使用@include定义好的@mixin在你的CSS样式中插入新的CSS样式，你也可以使用@extend定义好的CSS类选择器，向你的CSS样式中插入新的CSS样式。在Sass3.2中引入了一个新的特性——选择器占位符“%placeholder”，能过@extend可以得到更有效的输出。
@include
@extend
