Responsive web design has become the new normal, and many designers, developers and organizations have realized that static sample scripts are no longer an effective way to show their website to customers. As Stephen Hay said:

"We designed not pages, but component systems."

As the viewport changes and layout is adjusted, these components are rearranged and resized in various container sizes. Many designers turn to “style tile” to help customers understand and approve design directions without having to build fully detailed sample drafts instead of spending weeks building 3-4 static sample drafts of different screen sizes for a single website design (and take it out) the risk of clients rejecting all jobs). Style tile is designed to "display interface selections to customers without investing in multiple Photoshop models". Sometimes they are called element collages or UI maps.

The rise of style guides is very consistent with another latest development in front-end development: start in-browser prototype design as early as possible. When we integrate style guides to help customers understand design and move the process from design software to tagging, we end up creating a live web version of the PDF brand guide documents that many customers use.

As the title of this post suggests, Sass has some features that make it easier for us to create dynamic style guides. Let's take a look at these features now.

Color palette

One way to make style guides easier is to automate repeatable information. For example, to show your color palette to your customers, you can create several squares, each showing one color. Your HTML might look like this:

<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>

This may not be an ideal mark (you can absolutely use ::before instead of span.swatch), but it works for this demo.

After this is done, you need CSS to layout these color samples for your customers. We can use Sass to make it easier. Sass mapping is an excellent way to store these color values:

$colors: (
  blue: #2980b9,
  red: #e74c3c,
  green: #27ae60,
  gray: #95a5a6,
  dark-gray: #2c3e50
);

By storing these values ??in the map (rather than as 5 or more variables), we are now able to iterate over them and generate CSS automatically.

// 只需一點(diǎn)布局樣式即可制作方形樣本
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;
}

// 現(xiàn)在，為每個(gè) .swatch 分配正確的 background-color
@each $name, $value in $colors {
  .color-#{$name} {
    .swatch {
      background-color: $value;
    }
  }
}

Title

You can also use mappings for title styles. The following example is a little more complicated than color mapping.

$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;
  }
}

If you get more complicated with title styles, that's fine. If you plan to add properties such as color, letter spacing, or text conversion, you need to use nested mappings as shown in the following example:

$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 might ask, "Why not write all the nested mapped data directly in CSS? It looks like CSS, and I didn't really save much time by looping it." Make things happen with Sass The advantage of getting it easier is that if a technology does not make it easier for you, don't use it. However, if that complex mapping works for your project, use it!

Button

<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>