サス付きスタイルタイル

レスポンシブWebデザインは新しい通常のものになり、多くのデザイナー、開発者、および組織は、静的なサンプルスクリプトが顧客にウェブサイトを表示する効果的な方法ではなくなったことに気付きました。スティーブン・ヘイが言ったように：

「ページではなくコンポーネントシステムを設計しました。 "

ビューポートが変更され、レイアウトが調整されると、これらのコンポーネントはさまざまなコンテナサイズで再配置され、サイズが変更されます。多くのデザイナーは、「スタイルタイル」に目を向けて、1つのWebサイトデザインのために異なる画面サイズの3〜4の静的なサンプルドラフトを構築するのではなく、完全に詳細なサンプルドラフトを構築することなく、デザインの方向を理解および承認するのに役立ちます（そしてそれを取り出します）クライアントがすべてのジョブを拒否するリスク）。スタイルタイルは、「複数のPhotoshopモデルに投資することなく、インターフェイスの選択を顧客に表示する」ように設計されています。時々、それらは要素コラージュまたはUIマップと呼ばれます。

スタイルガイドの台頭は、フロントエンド開発の別の最新の開発と非常に一致しています。スタイルガイドを統合して、顧客がデザインを理解し、プロセスをデザインソフトウェアからタグ付けに移行できるようにすると、多くの顧客が使用するPDFブランドガイドドキュメントのライブWebバージョンを作成することになります。

この投稿のタイトルが示唆しているように、SASSにはダイナミックスタイルのガイドを簡単に作成できるようにするいくつかの機能があります。今すぐこれらの機能を見てみましょう。

カラーパレット

スタイルガイドを簡単にする方法の1つは、繰り返し可能な情報を自動化することです。たとえば、顧客にカラーパレットを表示するには、それぞれが1つの色を示すいくつかの正方形を作成できます。あなたの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マッピングは、これらの色の値を保存する優れた方法です。

これらの値をマップに保存することにより（5つ以上の変数ではなく）、それらを繰り返してCSSを自動的に生成できるようになりました。

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

タイトル

// 只需一点布局样式即可制作方形样本
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;
  }
}

この時点で、「ネストされたすべてのマップデータをCSSに直接書いてみませんか？それはCSSのように見えますが、私はそれをループすることであまり時間を節約しませんでしたそれを簡単にすることは、テクノロジーがあなたがそれを容易にしない場合、それを使用しないでください。ただし、その複雑なマッピングがプロジェクトに機能する場合は、使用してください！

ボタン

SASSマッピングのよりシンプルな使用法に戻ると、ボタンはスタイルタイルを自動化するもう1つの良い機会です。

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

スタイルガイドジェネレーター

上記のヒントは、私たちのためにいくつかの重複したCSSを書くことで私たちを助けますが、そのCSSと一致するように独自のHTMLを書く必要があります。また、必要なマーカーを生成するための優れたツールもいくつかあります。

これらのツールについて詳しく説明しませんが、それらの例とドキュメントを確認できます。

styledoccoは、CSSコメントブロックに記述されたマークダウンを取得し、一致するHTMLを生成するNPMモジュールです。

ホログラムは、CSSコメントブロックでマークダウンを使用してスタイルガイドマークアップを作成するルビージェムです。

結論

スタイルタイルは、固定サイズのピクセルに最適なWeb​​サイトを入手していることを予想外に確信させることなく、クライアントにデザインビジョンを示すのに最適な方法です。顧客は、視覚的なデザインの性質を伝えながら、ウェブサイトの流encyさを理解するのに役立ちます。 SASSにより、マッピングやループなどのツールを使用して、これらのスタイルタイルを簡単に生成できます。

SASSを使用してスタイルタイルやプロトタイピングを簡単にしますか？コメントでお知らせください！

以上がサス付きスタイルタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。