六、奠定 CSS3 基础
在上一章中，您重点学习了 CSS3 的一些新特性，以及如何使用 SASS 使您的生活变得更加轻松。在这一章中，你将把这些新知识应用到实践中，开始创建你的移动网络应用的可视化基础。momemo 应用中的大多数元素，如搜索、观看和喜欢的电影，都是用 JavaScript 处理和生成的，因此这些元素的样式将在第 8 章中讨论。
在您开始创建任何应用之前，您通常需要完成费力的引导任务。这需要设置好一切，比如你将要构建的应用的框架。虽然这是一个非常卑微和无聊的任务，但把它做好是很重要的，因为应用的其余部分可以从坚实的基础中受益。
在这一章中，你将学习如何利用 SASS 中的片段来组织你的 CSS 文件，这样就不会影响加载时间。您还将创建应用的基本框架，包括创建样式表以提高高分辨率显示器上的图像质量，以及创建应用的基本布局。
您需要下载应用的映像包，并将其放在应用映像(img)文件夹中。
井井有条
让我们从在应用文件夹中创建相关文件夹开始。在应用文件夹的 CSS 文件夹中，创建两个名为 mixins 和 partials 的文件夹，并在 CSS 文件夹中创建一个名为 mobile.scss 的新的 sass 文件。你的文件夹结构应该类似于下面的图 6-1 。
图 6-1。 CSS 文件夹结构
这个文件夹结构将允许你把你的表单、布局和排版的 CSS 分成单独的 SASS 文件。mobile.scss 文件只是一个主 SASS 文件，它将提取所有部分。这意味着，如果您想为只有版式的旧移动设备创建一个样式表，您可以创建一个新的主 SASS 文件，并只获取版式 SASS 文件，而不必复制任何 CSS。
打开 mobile.scss 文件并添加以下 SASS 代码:
`@import 'mixins/animations'; @import 'mixins/gradient'; @import 'mixins/box-sizing'; @import 'partials/reset'; @import 'partials/typography'; @import 'partials/layout'; @import 'partials/forms';
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { @import 'partials/highres'; }`
如第 5 章所示，这将在编译 SASS 文件时导入适当的 SASS 文件。
您还会注意到，在上面的代码中有一个媒体查询。此媒体查询将允许您为高分辨率设备获取高分辨率图形。在媒体查询中，您可以看到没有显式添加 CSS，而是导入了 highres 部分。这有助于防止任何 CSS 被添加到主 mobile.scss 文件中。mobile.scss 文件应该被简单地看作是一个 SASS 文件，用来把所有的东西放在一起，理想情况下应该只包含媒体查询和导入。
在编译 mobile.scss 文件之前，您需要创建适当的 SASS 文件。
- mixin/_ animations . SCS
- mixins/_ box-size . scss
- mixins/_gradient.scss
- partials/_forms.scss
- partials/_highres.scss
- partials/_layout.scss
- partials/_reset.scss
- partials/_ 印刷术. scss
继续创建它们，记住 SASS partials 需要在文件名的开头有一个 _(下划线),以便导入时被识别。
您需要创建如图 6-2 中所示的空文件。
图 6-2。 萨斯巴勒斯
您会注意到有一个名为 _reset.scss 的文件。如果您不熟悉 Eric Meyer 的 reset css 文件，reset 样式表用于创建跨浏览器 css 样式的公平竞争环境。这是因为浏览器可以为某些元素设置不同的默认样式，比如不同的边距、填充和字体大小。重置样式表为最常用的 HTML 元素设置新的可预测默认值。要注意的是，有些，特别是 Eric Meyer 的会重新设置字体，这样它们就没有任何风格了，这是有用的，但是你必须记住，对于有默认字体风格的元素，比如<pre />会有和<body />一样的字样。
在 mixins 文件夹中，你会看到几个看起来像 css 属性的文件，如 _animation.scss 和 _gradient.scss。这些文件有助于通过使用 mixins 创建属性的通用版本来消除一些特定于供应商的 CSS 对主 SASS 文件的污染。您可以开始向这些文件添加内容。
打开 empty _animations.scss 文件。这个 mixin 将用于创建动画，并应用于所有供应商。如果创建了一个新的特定于供应商的动画属性，它可以被添加到一个地方，而不是跨多个 SASS 文件添加。将以下代码添加到打开的文件中。
@mixin animation ($values) {
animation: $values;
-moz-animation: $values;
-webkit-animation: $values;
}
如您所见，它只是作为基于标准的 Mozilla 和 webkit 动画属性的代理，接受一组属性，然后将它们传递给供应商特定的动画属性。保存文件并关闭它。
打开 empty _box-sizing.scss 文件。这个 mixin 提供了对盒子大小的支持。关于 CSS 中的灵活布局，最令人沮丧的一个问题是，当您将元素设置为 100%宽(父元素的宽度)并带有填充时，浏览器通常会将填充添加到元素的宽度，即使宽度被指定为 100%，因此结果是您的元素会因您添加的填充量而过度拉伸，有时会将元素稍微推出屏幕或其父元素之外。框大小属性通过以下方式帮助克服这一问题:
- 使用内容框值时，从元素的宽度和高度中排除任何填充、边距或边框
- 使用填充框值时，包括元素宽度和高度的任何填充
- 当使用边框值时，包括任何填充和边框宽度以及元素的宽度和高度
@mixin box-sizing ($value) {
-moz-box-sizing: $value;
-webkit-box-sizing: $value;
box-sizing: $value;
}
同样，这个 mixin 只是通过将值传递给属性来充当供应商特定属性的代理。
最后，打开 _gradient.scss 文件，并向其中添加以下代码。
@mixin gradient($start, $stop, $degrees) {
background: rgba($start, 1);
background: -moz-linear-gradient($degrees, $start 0%, $stop 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
$start), color-stop(100%, $stop));
background: -o-linear-gradient($degrees, $start 0%,$stop 100%);
background: -ms-linear-gradient($degrees, $start 0% $stop 100%);
background: linear-gradient($degrees, $start 0%, $stop 100%);
}
你可能在上一章已经看过这个 mixin 了。它只是为供应商特定的渐变代码创建 CSS 渐变。它比其他 mixins 稍微复杂一点，因为在编写本文时，每个供应商都有自己的 CSS 渐变实现，这使得接受单个值并将其传递给供应商属性变得不可能。
创造分音
混音创建完成后，现在是创建分音的时候了。如前所述，通过在常规 CSS 文件中使用传统的@import，partials 将有助于将 CSS 的不同部分分成不同的文件，而不会对最终用户产生影响，这将对加载时间产生很大影响。
您可以从打开 partials 目录中的 empty _reset.scss 文件开始。您不必手动将下面的代码键入这个 SASS 文件，您可以从 Eric Mayar 的网站http://Meyer web . com/Eric/thoughts/2011/01/03/reset-revisited/复制它。下面列出的代码仅供您参考。
`/ http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTE: WORK IN PROGRESS USE WITH CAUTION AND TEST WITH ABANDON /
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0; padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/ remember to define visible focus styles! :focus { outline: ?????; } /
/ remember to highlight inserts somehow! / ins { text-decoration: none; } del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }`
保存并关闭文件。您需要添加代码的下一个文件是 _typography.scss 文件。在 Aptana Studio 中打开它。_typography.scss 文件将简单地设置文本在应用中的显示方式。正如您在下面的代码中看到的，您将简单地设计主体和标题的样式。
`body { font-size: 0.75em; font-family: Arial, Helvetica, sans-serif; }
h1, h2, h3, h4 { font-family: 'Arimo', sans-serif; font-weight: bold; margin-bottom: 0.5em; font-size: 1em; }
h3 { font-size: 1.25em; } h2 { font-size: 1.5em; } h1 { font-size: 1.9em; }`
你用 em 代替像素作为字体大小。将正文的字体大小设置为 0.75em 相当于 12px，如上面的代码片段所示，其中正文的字体大小被声明为 em。1em 相当于浏览器的默认字体大小，即 16px。要计算出 10px 在 em 中应该是多少，您可以使用 10 / 16，它等于 0.625，因此 10px 应该是 0.625em。em 是有用的，因为值是相对的。例如，如果您将 div 的字体大小设置为 0.75em (12px)，然后将其中的任何元素设置为 1em，则该字体大小将与父元素的字体大小相关。所以子元素中的 1em 变成了离父元素 0.75em。试图找出 em 的字体大小可能是一场噩梦，http://riddle.pl/emcalc/有一个解决方案，允许你建立一个基于 DOM 的像素字体大小树，网络应用会为你将它们转换为 EM，并考虑父元素的字体大小。
保存并关闭 _ topology . scss 文件。打开 _layout.scss 文件。_layout.scss 文件将控制应用中元素的位置、尺寸、颜色和一般布局。
首先要做的是对 body，html，#shoe 和。应用的甲板元素。您可以在顶部设置它们的样式，这样它们就可以在样式表的后面被覆盖。
body, html, #shoe, .deck {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
}
正如你所看到的，高度和宽度已经被设置为 100%,所以它跨越了屏幕的宽度和高度。溢出:隐藏；添加了，以便元素之外的任何内容都被截断，不会影响布局，为了更好地测量，添加了 0px 边距，以防止元素之间出现任何间隙。
接下来要做的是对#card-movie_search_results 卡片进行样式化。进行搜索时，卡片应显示在页面上所有元素的上方。您可以通过设置 z 索引来实现这一点。z-index 指示元素在元素堆栈中的位置。设置较高的数字通常会将元素放在堆栈的顶部。这种情况下用 50。
`/* * Individual Card Styles /
card-movie_search_results {
z-index: 50; }`
下一步是设置卡片组和卡片样式。如您所见，SASS 嵌套在这里用于嵌套卡片组中不同的卡片状态。当呈现 SASS 文件时，将生成适当的 CSS。您需要将甲板位置设置为相对位置。这将允许卡片组中绝对定位的卡片相对于父卡片组而不是整个视窗定位。
`/* * Deck styles / .deck {
position: relative;
}`
现在需要用。卡牌类也是。每张牌的宽度和高度都应该相同，但是要放在屏幕之外，这样用户一开始就看不到它。当。活动类被添加到任何。卡元素，它应该被带回到视图中。这可以通过将初始左侧位置设置为负值来实现，负值相当于卡片的宽度，在本例中为-100%。当您希望卡片重新出现在视图中时，会为设置 0px 的位置。主动造型。
`/* * Deck styles / .deck {
position: relative; .card {
height: 100%;
width: 100%;
left: -100%;
position: absolute;
}
.card.active { left: 0px; }
}`
接下来要设计的是屏幕条。滚动条将位于屏幕的顶部和底部。这些需要以统一的方式设计，以便用户可以很容易地找到它们。正如你在下面看到的，渐变混合被用来创建一个 CSS3 渐变作为这个元素的背景。
`/* * Header taskbar styles /
.screenbar { @include gradient(#7D9DCE, #ABC1E1, 90deg); }`
任务栏相当复杂，因为它包含应用的徽标、搜索栏和清除按钮。任务栏需要和屏幕一样宽，搜索栏需要灵活，这样无论屏幕大小如何，它都能占据大部分空间。
从下面的代码中可以看到，你将任务栏的字体颜色设置为白色，溢出区被设置为隐藏，这样它将包围所有浮动的元素。任务栏也有 10px 填充，底部有红色边框。
header#taskbar {
color: #FFFFFF;
overflow: hidden;
padding: 10px;
border-bottom: 1px solid #BF2628;
}
现在，您需要设计应用的品牌/徽标。为此，您可以使用 header (h1)元素，然后使用图像替换技术来显示徽标。这可以通过将 h1 的宽度和高度设置为与徽标相同的宽度和高度来实现，将 text-indent 属性设置为一个高的负任意值，以便文本位于屏幕之外，在这种情况下使用-10000px。最后，将徽标的背景设置为徽标。
h1 元素也浮动在任务栏的左侧，以便搜索表单可以占据剩余的可用空间。
`header#taskbar { ...
h1.branding { margin: 0px; float: left; width: 73px; height: 32px; text-indent: -10000px; overflow: hidden; background: url('../img/momemo.png') no-repeat top left; }
}`
接下来要做的是设置清除搜索链接。您使用与前面相同的图像替换技术来替换清除搜索链接中的文本。这次这个按钮被浮动到右边并隐藏起来，这样它就不会马上被看到。
`header#taskbar { ...
h1.branding { ... }
.clear-search { float: right; width: 35px; height: 35px; display: none; overflow: hidden; text-indent: -10000px; background: url('../img/clear.png') 50% 50% no-repeat; }
}`
最后要添加到 _layout.scss 文件中的是 searchactive 覆盖。当您添加 css 类时。searchactive 添加到 header#taskbar 元素，它将显示 clearsearch 按钮，并通过向 add-movie 表单添加右边距来为它提供足够的空间。这可以防止。searchactive buttom 从下拉到新行。
`header#taskbar { ... }
header#taskbar.searchactive {
.clear-search { display: block; }
form#add-movie { margin-right: 40px; }
}`
您的 final _layout.scss 文件应该类似于下面的代码。
`header#taskbar { color: #FFFFFF; overflow: hidden; padding: 10px; border-bottom: 1px solid #BF2628;
h1.branding { margin: 0px; float: left; width: 73px; height: 32px; text-indent: -10000px; overflow: hidden; background: url('../img/momemo.png') no-repeat top left; }
.clear-search { float: right; width: 35px; height: 35px; display: none; overflow: hidden; text-indent: -10000px; background: url('../img/clear.png') 50% 50% no-repeat; }
}
header#taskbar.searchactive {
.clear-search {
display: block;
} form#add-movie {
margin-right: 40px;
}
}`
接下来要做的是设计表单的样式。所以打开 _forms.scss 文件。首先要做的是为所有表单元素设置框的大小，使添加的任何填充或边框成为整体宽度的一部分。下面一行将使用盒子大小的 mixin 来实现这一点。
input, select, textarea, button {
@include box-sizing(border-box);
}
然后，您需要设置文本输入的样式，您可以使用新的 CSS3 属性选择器来完成这一工作，而不是像以前那样向每个文本输入元素添加 CSS 类。从下面的代码片段中可以看到，下面的文本输入有 1 像素的黑色边框和 5 像素的填充，而提交输入只有 10 像素的填充。应用中没有使用提交按钮，所以对它进行样式化还没有意义。
input[type="text"] {
border: 1px solid #000000;
padding: 5px;
}
目前，只有一个输入元素应该跨越其父元素的整个宽度。将来您可能想要添加更多这样的元素，所以将它转换成一个可以重用的 CSS 类是一个好主意。
input.full-width {
width: 100%;
}
通过在搜索表单中添加 80px 的左边距(大于或等于徽标的宽度)，表单中的任何内容都将出现在徽标旁边。
form#add-movie {
margin-left: 80px;
}
这是一个比浮动 add-movie 表单好得多的解决方案，因为如果不使用 JavaScript 来计算它的大小，它将不再能够拥有其父任务栏元素的全部宽度。
下面的代码简单地设计了搜索字段的样式。正如你所看到的，这里第一次使用了背景尺寸。background-size 属性允许您指定背景应该有多大，以像素为单位，或者以背景所添加到的元素的百分比来表示。
input.search {
padding-left: 30px;
background: url('../img/search.png') 5px 50% no-repeat transparent;
background-size: auto 50%;
border: none;
border-bottom: 1px solid #BF2628;
color: #FFFFFF;
font-size: 1.5em;
}
背景尺寸属性接受宽度和高度，这两个属性可以是不同的单位。例如，在本例中，宽度设置为自动，高度设置为 50%。这允许高度为元素高度的 50%,但宽度将根据背景图像的高度成比例调整，这样它就不会出现扭曲。
以下样式使用供应商特定的伪样式。-webkit-input-placeholder 和-moz-placeholder 允许您设置输入元素上使用的占位符文本的样式。例如，搜索框的背景在蓝色背景上是透明的，所以默认的灰色几乎看不见。文本需要是白色的，因此占位符伪对象允许您自定义占位符文本的呈现方式。
input.search::-webkit-input-placeholder, input.search::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
虽然这在 Android 4 上不会立即可见，但下面的样式会在搜索框中显示一个加载指示器，同时在后台搜索电影。
input.search.loading {
background-image: url('../img/loading.gif');
}
最终的表单 SASS 文件应该类似于下面的代码。
`input, select, textarea, button { @include box-sizing(border-box); }
input[type="text"] {
border: 1px solid #000000;
padding: 5px;
}input.full-width {
width: 100%;
}
form#add-movie { margin-left: 80px; }
input.search { padding-left: 30px; background: url('../img/search.png') 5px 50% no-repeat transparent; background-size: auto 50%; border: none; border-bottom: 1px solid #BF2628; color: #FFFFFF; font-size: 1.5em; }
input.search::-webkit-input-placeholder, input.search::-moz-placeholder { color: rgba(255, 255, 255, 0.5); }
input.search.loading { background-image: url('../img/loading.gif'); }`
保存并关闭文件。最后，您需要打开 _highres.scss 文件。这个文件将简单地用于替换任何高分辨率显示的图形，使它们看起来清晰。将以下代码添加到文件中。
`header#taskbar {
h1.branding { background-image: url('../img/momemo.png'); background-size: 73px 32px; }
}`
正如你所看到的，这里需要使用背景尺寸，因为尽管高分辨率文件的分辨率是低分辨率图像的两倍，CSS 在用作背景图像时仍然会使用图像的全尺寸。这将确保背景图像缩小到正确的像素大小。不使用这个和使用它的区别可以在下面的图 6-3 中显示。
图 6-3。 高密度显示器上的高分辨率图像(下图)与低分辨率图像(上图)
在 Aptana 中自动编译 Sass
直到现在，你还没有在 Aptana Studio 中编译过任何 SASS。在前一章中，您看到了如何使用 SASS 的内置 SASS 编译器命令来编译 SASS 文件。每当你想对你的 SASS 文件进行修改时，这会变得很麻烦。您可以通过使用 SASS 命令行自动编译您的 SASS 文件来解决这个问题。为了做到这一点，在 Aptana Studio 的应用浏览器中点击你的应用文件夹，然后点击命令图标，它看起来像一个齿轮，可以在图 6-4 中看到。
图 6-4。 命令菜单
点击打开终端菜单项。这将打开类似于图 6-5 的终端视图。
图 6-5。 终端视图
在终端视图中，输入以下命令并按回车键。
sass --watch css/*.scss
这将查找您的 SASS 文件中的任何更改，并自动为您生成 CSS 文件。你应该会看到类似于图 6-6 的东西。
图 6-6。 萨斯-手表输出
这还会在您的部分文件中查找更改，然后用新的更改自动覆盖 mobile.css。
每次打开 Aptana Studio 时，您都需要运行这个命令，并且您还应该始终保持这个终端视图打开。
现在你的 CSS 文件已经成功生成，在 Aptana Studio 中运行你的网站，右击 index.html 进入运行为 
JavaScript Web 应用。它将在 Firefox 中启动，访问移动设备地址栏中显示的 URL。你现在应该会看到类似于图 6-7 的东西。
图 6-7。 Momemo 带 CSS
如果你没有看到新的样式，回到 Aptana Studio，点击 CSS 文件夹，按键盘上的 F5 刷新它。应该会出现新的 mobile.css 文件。刷新你的手机上的网页，一切都应该看起来像它应该的样子。
总结
虽然这一章很短，但是您应该对如何真正利用 SASS 中的 partilals 和 mixins 以及如何为开始在之上构建 CSS/SASS 打下基础有了更深入的了解。
现在，您应该知道如何在主 SASS 文件(mobile.scss)的 CSS 媒体查询中使用片段。
版权属于：月萌API www.moonapi.com，转载请注明出处
