帶有Sass的樣式瓷磚-css教學-PHP中文網

Style Tiles with Sass

響應式網頁設計已成為新常態，許多設計師、開發人員和機構已意識到靜態樣稿不再是向客戶展示其網站的有效方式。正如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上的本文中所有代碼：

CodePen鏈接