響應(yīng)式網(wǎng)頁設(shè)計(jì)已成為新常態(tài)，許多設(shè)計(jì)師、開發(fā)人員和機(jī)構(gòu)已意識到靜態(tài)樣稿不再是向客戶展示其網(wǎng)站的有效方式。正如Stephen Hay所說：

“我們設(shè)計(jì)的不是頁面，而是組件系統(tǒng)?！?/p>

隨著視口的變化和佈局的調(diào)整，這些組件會在各種容器大小中重新排列和調(diào)整大小。許多設(shè)計(jì)師轉(zhuǎn)向“樣式磁貼”來幫助客戶理解和批準(zhǔn)設(shè)計(jì)方向，而無需構(gòu)建完全詳細(xì)的樣稿，而不是花費(fèi)數(shù)週時(shí)間為單個(gè)網(wǎng)站設(shè)計(jì)構(gòu)建3-4個(gè)不同屏幕尺寸的靜態(tài)樣稿（並冒著客戶拒絕所有工作的風(fēng)險(xiǎn)）。樣式磁貼旨在“向客戶展示界面選擇，而無需投資多個(gè)Photoshop模型”。有時(shí)它們被稱為元素拼貼或UI地圖。

樣式指南的興起與前端開發(fā)的另一個(gè)最新發(fā)展非常吻合：儘早開始瀏覽器內(nèi)原型設(shè)計(jì)。當(dāng)我們通過整合樣式指南來幫助客戶理解設(shè)計(jì)，並將該過程從設(shè)計(jì)軟件轉(zhuǎn)移到標(biāo)記中時(shí)，我們最終會創(chuàng)建許多客戶使用的PDF品牌指南文檔的實(shí)時(shí)網(wǎng)絡(luò)版本。

正如這篇文章的標(biāo)題所暗示的那樣，Sass具有一些特性，使我們更容易創(chuàng)建動態(tài)樣式指南。讓我們現(xiàn)在來看看這些特性。

顏色調(diào)色板

使樣式指南更容易的一種方法是自動化可重複的信息。例如，要向您的客戶展示您的顏色調(diào)色板，您可以創(chuàng)建幾個(gè)正方形，每個(gè)正方形顯示一種顏色。您的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>

這可能不是理想的標(biāo)記（您可以絕對使用::before代替span.swatch），但它適用於此演示。

完成此操作後，您需要CSS來為您的客戶佈局這些顏色樣本。我們可以使用Sass使其更簡單。 Sass映射是存儲這些顏色值的絕佳方式：

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

通過將這些值存儲在映射中（而不是作為5個(gè)或更多變量），我們現(xiàn)在能夠遍歷它們並自動生成CSS。

// 只需一點(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;
    }
  }
}

標(biāo)題

您也可以對標(biāo)題樣式使用映射。下面的示例比顏色映射複雜一些。

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

如果您對標(biāo)題樣式變得更複雜，那就可以了。如果您計(jì)劃添加顏色、字母間距或文本轉(zhuǎn)換等屬性，則需要使用嵌套映射，如下例所示：

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

此時(shí)，您可能會問：“為什麼不直接在CSS中編寫所有嵌套映射數(shù)據(jù)呢？它看起來像CSS，我通過將其循環(huán)並沒有真正節(jié)省多少時(shí)間。”使用Sass使事情變得更容易的好處在於：如果某種技術(shù)沒有使它對您更容易，請不要使用它。但是，如果該複雜映射適用於您的項(xiàng)目，請使用它！

按鈕

回到Sass映射的更簡單的用法，按鈕是自動化樣式磁貼的另一個(gè)好機(jī)會：

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

此代碼段將根據(jù)與上面調(diào)色板相同的顏色創(chuàng)建按鈕的CSS。如果您有不同的UI按鈕顏色集，您可以為$button-colors使用不同的映射。

以下是在CodePen上的本文中所有代碼：

CodePen鏈接

樣式指南生成器

上述技巧通過為我們編寫一些重複的CSS來幫助我們，但是需要我們編寫自己的HTML來配合該CSS。還有一些不錯(cuò)的工具可以生成您需要的標(biāo)記。

我不會詳細(xì)解釋這些工具，但您可以查看它們的示例和文檔。

StyleDocco是一個(gè)npm模塊，它採用CSS註釋塊中編寫的Markdown，並生成匹配的HTML。

Hologram是一個(gè)Ruby gem，它也採用CSS註釋塊中的Markdown來創(chuàng)建樣式指南的標(biāo)記。

結(jié)論

樣式磁貼是一種向客戶展示設(shè)計(jì)願景的好方法，而不會意外地讓他們相信他們正在獲得固定大小、像素完美的網(wǎng)站。它們幫助客戶理解其網(wǎng)站的流暢性，同時(shí)仍然傳達(dá)視覺設(shè)計(jì)的本質(zhì)。 Sass使我們更容易使用映射和循環(huán)等工具來生成這些樣式磁貼。

您是否使用Sass使樣式磁貼或原型設(shè)計(jì)更容易？請?jiān)谠u論中告訴我們！

以上是帶有Sass的樣式瓷磚的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！