响应式网页设计已成为新常态，许多设计师、开发人员和机构已意识到静态样稿不再是向客户展示其网站的有效方式。正如Stephen Hay所说：
“我们设计的不是页面，而是组件系统。”
随着视口的变化和布局的调整，这些组件会在各种容器大小中重新排列和调整大小。许多设计师转向“样式磁贴”来帮助客户理解和批准设计方向，而无需构建完全详细的样稿，而不是花费数周时间为单个网站设计构建3-4个不同屏幕尺寸的静态样稿（并冒着客户拒绝所有工作的风险）。样式磁贴旨在“向客户展示界面选择，而无需投资多个Photoshop模型”。有时它们被称为元素拼贴或UI地图。
样式指南的兴起与前端开发的另一个最新发展非常吻合：尽早开始浏览器内原型设计。当我们通过整合样式指南来帮助客户理解设计，并将该过程从设计软件转移到标记中时，我们最终会创建许多客户使用的PDF品牌指南文档的实时网络版本。
正如这篇文章的标题所暗示的那样，Sass具有一些特性，使我们更容易创建动态样式指南。让我们现在来看看这些特性。
使样式指南更容易的一种方法是自动化可重复的信息。例如，要向您的客户展示您的颜色调色板，您可以创建几个正方形，每个正方形显示一种颜色。您的HTML可能如下所示：
<ul class="color-palette"> <li class="color-blue"><span class="swatch">Blue</span></li> <li class="color-red"><span class="swatch">Red</span></li> <li class="color-green"><span class="swatch">Green</span></li> <li class="color-gray"><span class="swatch">Gray</span></li> <li class="color-dark-gray"><span class="swatch">Dark Gray</span></li> </ul>
这可能不是理想的标记（您可以绝对使用::before代替span.swatch），但它适用于此演示。
完成此操作后，您需要CSS来为您的客户布局这些颜色样本。我们可以使用Sass使其更简单。Sass映射是存储这些颜色值的绝佳方式：
$colors: ( blue: #2980b9, red: #e74c3c, green: #27ae60, gray: #95a5a6, dark-gray: #2c3e50 );
通过将这些值存储在映射中（而不是作为5个或更多变量），我们现在能够遍历它们并自动生成CSS。
// 只需一点布局样式即可制作方形样本
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;
}
// 现在，为每个 .swatch 分配正确的 background-color
@each $name, $value in $colors {
.color-#{$name} {
.swatch {
background-color: $value;
}
}
}您也可以对标题样式使用映射。下面的示例比颜色映射复杂一些。
$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;
}
}如果您对标题样式变得更复杂，那就可以了。如果您计划添加颜色、字母间距或文本转换等属性，则需要使用嵌套映射，如下例所示：
$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;
}
}
}此时，您可能会问：“为什么不直接在CSS中编写所有嵌套映射数据呢？它看起来像CSS，我通过将其循环并没有真正节省多少时间。”使用Sass使事情变得更容易的好处在于：如果某种技术没有使它对您更容易，请不要使用它。但是，如果该复杂映射适用于您的项目，请使用它！
回到Sass映射的更简单的用法，按钮是自动化样式磁贴的另一个好机会：
<ul class="color-palette"> <li class="color-blue"><span class="swatch">Blue</span></li> <li class="color-red"><span class="swatch">Red</span></li> <li class="color-green"><span class="swatch">Green</span></li> <li class="color-gray"><span class="swatch">Gray</span></li> <li class="color-dark-gray"><span class="swatch">Dark Gray</span></li> </ul>
此代码段将根据与上面调色板相同的颜色创建按钮的CSS。如果您有不同的UI按钮颜色集，您可以为$button-colors使用不同的映射。
以下是在CodePen上的本文中所有代码：
上述技巧通过为我们编写一些重复的CSS来帮助我们，但是需要我们编写自己的HTML来配合该CSS。还有一些不错的工具可以生成您需要的标记。
我不会详细解释这些工具，但您可以查看它们的示例和文档。
StyleDocco是一个npm模块，它采用CSS注释块中编写的Markdown，并生成匹配的HTML。
Hologram是一个Ruby gem，它也采用CSS注释块中的Markdown来创建样式指南的标记。
样式磁贴是一种向客户展示设计愿景的好方法，而不会意外地让他们相信他们正在获得固定大小、像素完美的网站。它们帮助客户理解其网站的流畅性，同时仍然传达视觉设计的本质。Sass使我们更容易使用映射和循环等工具来生成这些样式磁贴。
您是否使用Sass使样式磁贴或原型设计更容易？请在评论中告诉我们！
以上是带有Sass的样式瓷砖的详细内容。更多信息请关注PHP中文网其他相关文章！
