我们从 视频 #034 中断的地方继续，并继续构建搜索区域。
这次我们专注于搜索的“打开”状态，构建实际的表单元素本身。搜索字段本身使用 HTML5 表单元素类型“search” - 通常 具有一些自定义样式 与之相关，但由于我们使用 Normalize (视频 #011)，这对我们来说不是问题。
我们为网站上按钮的样式创建了一个新的模块化 CSS (_buttons.scss)。看看我们在那里做什么？任何从心理上来说应该被隔离的样式位，我们都为其创建一个新文件。我们可以根据需要进行尽可能多的操作而无需担心，因为这些文件最终都会与 Sass 一起连接。
三维按钮外观仅通过大量逗号分隔的框阴影创建。颜色很容易更改，因为使用（你猜对了！）变量。
$bottomSide: #3852b1;
$rightSide: #203891;
.button, #rcp_submit {
border: 0; // kill default styling
background: #4e68c7;
box-shadow:
// right side // bottom
1px 0px 1px $rightSide, 0px 1px 1px $bottomSide,
2px 1px 1px $rightSide, 1px 2px 1px $bottomSide,
3px 2px 1px $rightSide, 2px 3px 1px $bottomSide,
4px 3px 1px $rightSide, 3px 4px 1px $bottomSide,
5px 4px 1px $rightSide, 4px 5px 1px $bottomSide,
6px 5px 1px $rightSide;
}我们在输入元素中回显相同的样式（仅在内部而不是外部），完成 3D 外观。阴影的偏移量与我们的 $offset 变量相匹配，从而实现了一些设计一致性。
不在此视频中，但在稍后，我们发现输入的内部阴影更容易使用两个边框而不是所有阴影（边框在一定角度相遇）来实现。不幸的是，按钮上无法实现。
这种内嵌输入样式最终会渗透到整个网站的所有输入样式中，无论好坏。
对于 Google 自定义搜索，是否可以在特定情况下排除目录/子文件夹？我只是在想博客搜索问题 - 而不是仅仅搜索博客 - 是否可以在单独的搜索功能中排除除博客之外的所有内容？
嗯嗯嗯。非常聪明。这正是我们在 CodePen 上用来优化结果的方法。出于某种原因，我之前没有想到这一点。我会看看我能做些什么。
嗨，Chris，
与本视频有点无关，但你能对你的 @import 问题再多解释一下吗？我刚开始使用 sass 和 codekit，因为看了这些视频，我想确保在需要的时候使用 url。任何帮助都会很棒。
在 Sass 中使用 @import 太棒了。它的工作方式类似于 PHP include，它会获取你引用的文件的内容，并将它放在最终编译版本中的那个位置。
你也可以在普通的 CSS 中使用 @import。不过它的工作方式略有不同。它只引用你指定的文件。它的行为就像你包含了它，但它必须发出请求才能获取该文件。
此外，语法略有不同。
SCSS: @import “file.scss”;
CSS: @import url(“file.scss”);
从技术上讲，规范允许在普通的 CSS 中使用这两种语法，但就像其他所有东西一样，浏览器支持各不相同，使用 url() 语法更安全。
嘿，Chris，
你可能不太关心这个，但...
这两件事极大地加快了我使用 ST2 的开发流程:
zen coding - 非常棒的自动完成。快速创建 ul/li 导航并使用 tab 填充
CMD 点击进行多光标选择 - 例如 $rightSide $bottomSide
谢谢，
很棒的视频
我在这方面不太精通，但你会很高兴知道这两件事在本系列中都有出现，我们谈论了它们，并使用了一点。
在获取 /blog/ 中的帖子方面，我认为我有一个很好的解决方案。你可以通过 WP 设置进行更改，以添加博客，并通过连接到 404 处理程序，我们可以检查是否存在链接，方法是添加 /blog/（如果它没有），并在存在的情况下进行正确重定向，从而避免所有 SEO 问题。
我在 GitHub 上更详细地介绍了这一点，但我已经在其他系统上做过，并且相信它可以在 WordPress 上运行，只需连接到它的“页面未找到”处理程序。
关于 /blog/ 问题，你理论上不能只是将所有类别放在一个名为“blog”（或类似名称）的类别下吗？它有点脏，但我感觉它会起作用。
搜索问题已通过创建一个新的 Google 搜索引擎来解决，该引擎包含对网站所有子部分的排除过滤器，因此它只返回博客文章。