As responsive web design has become the new normal, many designers, developers, and agencies have realized that static comps are no longer a valuable way to show clients their sites. As Stephen Hay says:
随着自适应Web设计已成为一种新常态，许多设计师，开发人员和代理机构已经意识到，静态组件已不再是向客户展示其网站的宝贵方法。 正如史蒂芬·海伊(Stephen Hay)所说：
“We’re not designing pages, we’re designing systems of components.”
“我们不是在设计页面，而是在设计组件系统。”
Those components reflow and resize in various container sizes as the viewport changes and layouts shift. Rather than spending weeks building static comps of 3-4 different screen sizes for a single site design (and risking client rejection of all that work), many designers are turning to “style tiles” to help clients understand and approve design direction without building fully detailed comps. Style tiles are designed to “present clients with interface choices without making the investment in multiple photoshop mockups.” Sometimes they’re referred to as element collages or UI maps.
随着视口的更改和布局的改变，这些组件将按各种容器大小进行重排和调整大小。 与其花费数周的时间来为单个站点设计构建3-4种不同屏幕尺寸的静态图形(并冒客户拒绝所有工作的风险)，许多设计师都转向“样式图块”来帮助客户理解和批准设计方向，而无需完全构建详细的补偿。 样式图块旨在“向客户提供界面选择，而无需在多个photoshop原型上进行投资”。 有时，它们被称为元素拼贴或UI映射 。
The rise of style guides fits nicely with another recent development in front-end development: starting in-browser prototyping as early in the process as possible. When we help clients understand a design by putting together style guides and move that process into markup and out of design software, we end up creating live web versions of the PDF brand guideline documents many clients use.
风格指南的兴起与前端开发中的另一个最新发展很好地契合：尽可能早地开始在浏览器中进行原型设计。 当我们通过整合样式指南来帮助客户理解设计并将该过程移入标记和设计软件之外时，我们最终会创建许多客户使用的PDF品牌指南文档的实时Web版本。
As the title of this post hinted, Sass has some features that make it easier for us to create living style guides. Let’s take a look at those now.
正如帖子标题所暗示的那样，Sass具有一些功能，使我们可以更轻松地创建生活风格指南。 让我们现在看看那些。
An easy way to make style guides easier is to automate repeatable information. For example, to show your client your color palette, you might create several squares, each one showing one of the colors. Your HTML might look like this:
使样式指南更容易的一种简单方法是使可重复信息自动化。 例如，要向客户显示您的调色板，您可以创建多个正方形，每个正方形显示一种颜色。 您HTML可能如下所示：
<ul class="color-palette"> <li class="color-blue"> <span class="swatch"></span> Blue </li> <li class="color-red"> <span class="swatch"></span> Red </li> <li class="color-green"> <span class="swatch"></span> Green </li> <li class="color-gray"> <span class="swatch"></span> Gray </li> <li class="color-dark-gray"> <span class="swatch"></span> Dark Gray </li> </ul>That might not be the ideal markup (you could definitely use ::before instead of span.swatch), but it will work for this demo.
那可能不是理想的标记(您可以肯定地使用::before而不是span.swatch )，但是它将适用于此演示。
Once you’ve done that, you’ll need CSS to layout those color swatches for your client. We can use Sass to make that simpler. Sass maps are a great way to store those color values:
完成此操作后，您将需要CSS为客户布置这些色样。 我们可以使用Sass使其更简单。 Sass贴图是存储这些颜色值的好方法：
$colors: ( blue: #2980b9, red: #e74c3c, green: #27ae60, gray: #95a5a6, dark-gray: #2c3e50 );By storing those values in a map (instead of as 5 or more variables), we now have the ability to loop through them and generate CSS automatically.
通过将这些值存储在映射中(而不是5个或更多变量)，我们现在能够遍历它们并自动生成CSS。
// just a little layout style to make square swatches ul { margin: 0; padding: 0; text-align: center; } li { display: inline-block; width: 15%; margin: 1%; padding: .5em; box-shadow: 0 1px 4px -1px rgba(0,0,0,.5); } .swatch { display: block; height: 0; margin-bottom: .5em; padding: 100% 0 0; } // now, assign each .swatch the right background-color @each $name, $value in $colors { .color-#{$name} { .swatch { background-color: $value; } } }You can use a map for heading styles as well. The example below is a bit more complicated than the color map.
您也可以将地图用于标题样式。 下面的示例比颜色映射要复杂一些。
$sans: Open Sans, Tahoma, sans-serif; $serif: Droid Serif, Palatino, serif; $headings: ( h1: bold 2em/1.2 $sans, h2: light 1.5em/1.2 $sans, h3: bold 1.2em/1.2 $sans, h4: bold 1em/1.2 $sans, h5: bold 1em/1.2 $serif, h6: italic 1em/1.2 $serif ); @each $element, $font-property in $headings { #{$element} { font: $font-property; } }That’s all fine, unless you’re getting more complex with your heading styles. If you plan to add properties like color, letter-spacing, or text-transform, you’ll need to use a nested map, like the example below:
没关系，除非您的标题样式变得更加复杂。 如果您打算添加诸如color ， letter-spacing或text-transform类的属性，则需要使用嵌套地图，例如以下示例：
$headings-complex: ( h1: ( font: bold 2em/1.2 $sans, color: map-get($colors, blue) ), h2: ( font: 200 1.5em/1.2 $sans, letter-spacing: .1em, text-transform: uppercase, color: map-get($colors, dark-gray) ), h3: ( font: bold 1.2em/1.2 $sans, color: map-get($colors, dark-gray) ), h4: ( font: normal 1em/1.2 $sans, letter-spacing: .1em, text-transform: uppercase, color: map-get($colors, dark-gray) ), h5: ( font: bold 1em/1.2 $serif, color: map-get($colors, blue) ), h6: ( font: italic 1em/1.2 $serif, color: map-get($colors, dark-gray) ) ); @each $element, $style-map in $headings-complex { #{$element} { @each $property, $value in $style-map { #{$property}: $value; } } }At this point, you may be asking, “Why not just write all that nested map data in CSS? It looks like CSS and I’m not really saving much time by making it a loop.” That’s the great thing about using Sass to make things easier: if a technique doesn’t make it easier for you, don’t use it. But if that complex map works for your project, go for it!
此时，您可能会问：“为什么不只在CSS中编写所有嵌套的地图数据？ 看起来像CSS，通过循环它并没有真正节省很多时间。” 这是对使用萨斯使事情变得更容易了伟大的事情：如果一个技术不会使你更容易，不使用它。 但是，如果那个复杂的地图适合您的项目，那就去做吧！
Going back to simpler uses of Sass maps, buttons are another good opportunity to automate style tiles:
回到简单的使用Sass贴图的方式，按钮是另一个自动化样式瓦片的好机会：
@mixin button($color) { display: inline-block; background-color: $color; color: white; border-radius: .25em; line-height: 1; text-transform: uppercase; padding: .5em 1em; text-shadow: 1px 1px 1px rgba(0,0,0,.5); box-shadow: inset 0 .125em .5em rgba(255,255,255,.25), inset 0 -.125em .5em rgba(0,0,0,.25); &:hover { background-color: darken($color, 5%); } } @each $name, $value in $colors { .button-#{$name} { @include button($value); } }That snippet will create CSS for buttons based on the same colors as the palette above. If you have a different set of colors for UI buttons, you could use a different map for $button-colors.
该代码段将基于与上面的调色板相同的颜色为按钮创建CSS。 如果UI按钮有不同的颜色集，则可以为$button-colors使用不同的映射。
Here is a CodePen of all the code in this article:
这是本文中所有代码的CodePen：
See the Pen Style Tiles with Sass by SitePoint (@SitePoint) on CodePen.
请参见CodePen上的SitePoint ( @SitePoint ) 带有Sass的笔样式 图块 。
The tips above help us out by writing some repetitive CSS for us, but require us to write our own HTML to go along with that CSS. There are some good tools for generating the markup you need as well.
上面的技巧通过为我们编写一些重复CSS来帮助我们，但是需要我们编写自己HTML来与该CSS一起使用。 还有一些很好的工具可以生成您所需的标记。
I won’t go into a detailed explanation for these tools, but you can check out their examples and documentation.
我不会对这些工具进行详细说明，但是您可以查看它们的示例和文档。
StyleDocco is an npm module that takes Markdown written in CSS comment blocks and generates HTML to match.
StyleDocco是一个npm模块，它使用用CSS注释块编写的Markdown并生成要匹配HTML。
Hologram is a Ruby gem that also takes Markdown out of CSS comment blocks to create markup for a style guide.
全息图是一种Ruby宝石，也可以将Markdown移出CSS注释块，从而创建样式指南的标记。
Style tiles are a great way to give clients a vision of a design without accidentally letting them believe that they’re getting a fixed-size, pixel-perfect site. They help clients understand the fluid nature of their sites, while still communicating the essence of the visual design. Sass makes it easier for us to generate those style tiles with tools like maps and loops.
样式图块是一种让客户了解设计的好方法，而不会无意间让客户相信他们正在获得固定大小，完美像素的网站。 他们帮助客户了解其网站的流动性，同时仍传达视觉设计的实质。 Sass使我们可以更轻松地使用诸如地图和循环之类的工具生成这些样式图块。
Have you used Sass to make style tiles or prototyping easier? Let us know how in the comments!
您是否使用Sass来简化样式图块或原型制作？ 让我们知道如何发表评论！
翻译自: https://www.sitepoint.com/style-tiles-sass/
相关资源：数字图像处理(冈本萨斯) 课后答案