到目前为止，实际的网站看起来与我们的 Photoshop 设计完全不同。在这个屏幕录像中，我们深入探讨了如何实现这一点，从顶部的头部和Logo区域开始。在视觉上开始构建网站的感觉很好。
我们使用 Frank DeLoupe 作为颜色拾取器，它与 Photoshop 很好地集成在一起（它使您选择的颜色成为 Photoshop 中的活动颜色，并复制到剪贴板）。
在某个时刻，我们更改了 Sass/Compass 配置，以便将 CSS 编译为 :expanded 而不是 :compressed，以出于调试目的查看生成的实际 CSS。
我们必须动动脑筋，思考事物将如何放置以及如何对浏览器窗口的灵活性质做出反应。例如，Logo 应始终接触左上角。
我们做了很多调整数值以使事物看起来恰到好处的工作，并在各个地方添加了细微的细节以使事物看起来更好，例如在纸张堆叠效果中添加轻微的阴影。
迄今为止最好的视频！喜欢 SASS 技术
使用 Frank DeLoupe 的最佳方法是为您的颜色拾取器设置一个热键，而不是每次都用鼠标从菜单中选择它（在首选项下）。我在 Mac 上使用 (
option f)，其中 'f' 代表 Frank……Duh！此外，可以通过根据颜色在设计中的位置或用途来描述它们，更有效地使用 Sass 中的颜色变量。例如，与其将页面的背景称为
$gray，不如说 $pageBG 更明智。通过使用这种方法，颜色不会绑定到实际的颜色变量 - 以防您将来不想要灰色。如果您要将页面包装的背景更改为白色，则 $gray 就没有意义了。是的，我现在有一个键盘命令，绝对是所有电脑操作的最佳方式。（尤其是星际争霸 II！）
关于颜色命名 - 您的想法是理想的，并且非常有道理，但有时我只是按照我大脑的工作方式做事，而不是最佳的语义方法。我发现当我使用像 page-bg 或 top-border-emphasis 或类似名称时，我永远也记不住我叫它们什么，这使得开发比本来就有的速度更慢，也更令人沮丧。在这个设计中，$orange 等名称对我来说很有效。
我想知道如何在 Sass 中嵌套伪元素，我一直想查找它，但它总是被推到一边。迄今为止最好的视频，Chris！
我的 iPad 上无法播放这些视频。我希望您能更多地介绍 CSS。我不使用 Sass，因此尝试从您的 Sass 中弄清楚 CSS 有点棘手。
无法下载视频，它是一个“download.htm”
没关系，我是一只“狐狸”，而不是熊。好的，升级链接在哪里？
哦，我希望我可以编辑我的评论。
关于下载，请在点击下载按钮之前刷新页面。安全链接的有效期很短，刷新似乎可以解决问题。
在您的 Fox 级别，您仍然可以下载视频，但不能下载随附的文件。
如果您仍想升级，请通过 [email protected] 联系我，我会为您提供帮助。
我将隐藏这条评论，以尝试将评论线程保持在内容上，而不是技术问题上。
哈哈，我只是想一直喊变量，直到您意识到您没有输入 $ 符号。
我也一直在做同样的事情！！！
我也是 :D
嘿，Chris！！很棒的工作，不仅在 Redesign 上，而且还加入了对我们的工作流程有很大帮助的新内容。只有一个疑问，您是否可以分享项目的最终 PSD 文件。
很棒的视频，Chris。我尤其喜欢 Git 上的问题仓库。
https://github.com/chriscoyier/CSS-Tricks-v10
我遇到了一些视频问题，后来才发现您正在处理它。好主意。
我刚接触所有这些，这可能是一个愚蠢的问题，但是您将 Sublime 设置为查看 scss 的语法是什么？我将其设置为 css 并将颜色方案设置为 twilight，但它显示不正确。
我选择“SASS” :: http://cl.ly/JQ9E
它*可能*是一个插件。这里有一个 :: https://github.com/n00ge/sublime-text-haml-sass
谢谢，Chris！我使用的是 Windows，我不确定是否所有内容都完美匹配。
我的意思是程序之间细微的差异。
插件运行完美！再次感谢。对于像我这样的 Win7 新手…
user/appdata/roaming/sublime text 2/packages
粘贴插件
Chris，我喜欢您将常用元素放入 `_bits.scss` 文件中的聪明做法。
如果您想知道，Compass 有一个小节介绍最佳实践，其中讨论了许多相同的内容，以及您在其中触及的其他几个项目
http://compass-style.org/help/tutorials/best_practices/
对于拥有一个共同的起点，以便所有 Compass 项目都具有相同的初始结构，以便人们知道在哪里查找变量和自定义混合等，这很好。
我个人也维护着我自己的 normalize 版本，它是从一个已经为我将大量内容放入 SASS 的人那里分叉出来的，它有一个 _base.scss 控制着许多起始排版内容。它还包含我的一些小调整，例如您删除链接的下划线和边框框等。我自己的小样板。
嗨，Chris！
我想知道您如何用那个矩形测量东西？它是 Mac 上内置的还是一个应用程序，或者是什么？
是的，在 Mac 上，您可以按 Command-Shift-4 并获得一个十字准线，可以在其中拖动并截取屏幕截图。但它还会告诉您所选区域的尺寸，这通常同样有用。
但是请确保如果在 Photoshop 文件中执行此操作，则 Photoshop 设置为“实际”大小。我稍微放大了一点，所以肉眼没有注意到，但这弄乱了我的所有测量结果。
那个视频太棒了，Chris。刚刚下载了 Frank DeLoupe 和 CodeKit。这些视频让我想起了我在第二部星球大战上映后与我兄弟的一段对话，卢卡斯揭晓了尤达第一次在屏幕上实际进行的后空翻 CGI 战斗。我说：“他们应该在学校教授尤达。”我哥哥说：“他们就是这样做的。”
昨天也收到了 CSS-Tricks 衬衫。谢谢！
这个视频真是让我大开眼界。之前我非常害怕 Sass。
很棒的视频，以及一些来自其他人的非常有用的评论/链接。谢谢大家！
嘿，Chris，在 Photoshop 中，你实际上可以使用 Cmd+单击来使用自动选择，即使你没有开启它 :)
绝对喜欢观看你的作品。这让我非常想起我在构建时的思考过程，这对于我思考自己是否在以“正确的方式”做事很有帮助。
感谢精彩的演示！我特别喜欢新的颜色选择器。之前一直使用 ColorSnapper，并且需要将值复制粘贴到 Photoshop 中，这非常浪费时间。
嗨，
首先我要感谢你。这些视频给了我很多帮助，而我甚至还没有看完一半。请继续制作！
我有一个问题。
我注意到我的菜单在 Firefox 中的文本填充位置比在 Chrome 中低，有没有办法只针对 Firefox 进行调整？我不知道我是否解释清楚了，我是一个编码新手。
谢谢！
是否非常明显且看起来很糟糕？可能存在其他导致此问题的原因。或者可能是浏览器错误，在这种情况下，最好的办法是创建一个简化测试用例并报告它。绝对最后的选择是使用浏览器黑客来定位 Firefox 并进行调整：http://browserhacks.com/
我现在说这些可能有点晚了，你可能已经想出来了。要在 Sublime Text 中设置默认制表符大小，请转到“首选项” - “设置 - 默认值”，然后向下滚动到大约第 45 行，将显示为“tab-size”的部分更改为你首选的制表符大小，然后保存并关闭。里面还有其他一些有用的东西可以玩。
很棒的教程，Chris，谢谢