Jubin gaya dengan sass

Reka bentuk web responsif telah menjadi normal baru, dan banyak pereka, pemaju dan organisasi telah menyedari bahawa skrip sampel statik tidak lagi merupakan cara yang berkesan untuk menunjukkan laman web mereka kepada pelanggan. Seperti yang dikatakan Stephen Hay:

"Kami tidak merancang halaman, tetapi sistem komponen."

Apabila perubahan viewport dan susun atur diselaraskan, komponen -komponen ini disusun semula dan diubahsuai dalam pelbagai saiz kontena. Ramai pereka beralih kepada "jubin gaya" untuk membantu pelanggan memahami dan meluluskan arahan reka bentuk tanpa perlu membina draf sampel terperinci sepenuhnya dan bukannya menghabiskan minggu membina draf sampel statik 3-4 saiz skrin yang berbeza untuk reka bentuk laman web tunggal (dan mengeluarkannya) risiko pelanggan menolak semua pekerjaan). Jubin Gaya direka untuk "memaparkan pilihan antara muka kepada pelanggan tanpa melabur dalam pelbagai model Photoshop". Kadang -kadang mereka dipanggil kolaj elemen atau peta UI.

Kebangkitan panduan gaya sangat konsisten dengan perkembangan terkini yang lain dalam pembangunan front-end: memulakan reka bentuk prototaip dalam penyemak imbas seawal mungkin. Apabila kami mengintegrasikan panduan gaya untuk membantu pelanggan memahami reka bentuk dan memindahkan proses dari perisian reka bentuk untuk penandaan, kami akhirnya membuat versi web langsung dokumen panduan jenama PDF yang banyak digunakan oleh pelanggan.

Sebagai tajuk jawatan ini, Sass mempunyai beberapa ciri yang memudahkan kita membuat panduan gaya dinamik. Mari kita lihat ciri -ciri ini sekarang.

Palet warna

Satu cara untuk membuat panduan gaya lebih mudah ialah mengautomasikan maklumat berulang. Sebagai contoh, untuk menunjukkan palet warna anda kepada pelanggan anda, anda boleh membuat beberapa dataran, masing -masing menunjukkan satu warna. HTML anda mungkin kelihatan seperti ini:

<code class="language-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></code>

Ini mungkin bukan tanda yang ideal (anda boleh menggunakan

bukannya ::before), tetapi ia berfungsi untuk demo ini. span.swatch

Selepas ini, anda memerlukan CSS untuk susun atur sampel warna ini untuk pelanggan anda. Kita boleh menggunakan sass untuk memudahkannya. Pemetaan Sass adalah cara terbaik untuk menyimpan nilai -nilai warna ini:

<code class="language-scss">$colors: (
  blue: #2980b9,
  red: #e74c3c,
  green: #27ae60,
  gray: #95a5a6,
  dark-gray: #2c3e50
);</code>

Dengan menyimpan nilai -nilai ini dalam peta (bukannya 5 atau lebih pembolehubah), kita kini dapat melangkah ke atasnya dan menjana CSS secara automatik.

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

Tajuk

Anda juga boleh menggunakan pemetaan untuk gaya tajuk. Contoh berikut adalah sedikit lebih rumit daripada pemetaan warna.

<code class="language-scss">$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;
  }
}</code>

Jika anda lebih rumit dengan gaya tajuk, tidak mengapa. Jika anda merancang untuk menambah sifat seperti warna, jarak huruf, atau penukaran teks, anda perlu menggunakan pemetaan bersarang seperti yang ditunjukkan dalam contoh berikut:

<code class="language-scss">$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;
    }
  }
}</code>

Pada ketika ini, anda mungkin bertanya, "Mengapa tidak menulis semua data yang dipetakan secara langsung di CSS? mendapatkan lebih mudah ialah jika teknologi tidak memudahkan anda, jangan gunakannya. Walau bagaimanapun, jika pemetaan kompleks itu berfungsi untuk projek anda, gunakannya!

Butang

Kembali ke penggunaan pemetaan sass yang lebih mudah, butang adalah satu lagi peluang yang baik untuk mengautomasikan jubin gaya:

<code class="language-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></code>

Coretan kod ini akan membuat CSS butang berdasarkan warna yang sama seperti palet di atas. Jika anda mempunyai set warna butang UI yang berbeza, anda boleh menggunakan pemetaan yang berbeza untuk $button-colors.

Berikut adalah semua kod dalam artikel ini di Codepen:

codepen link

Penjana Panduan Gaya

Petua di atas membantu kami dengan menulis beberapa CSS pendua untuk kami, tetapi memerlukan kami menulis HTML kami sendiri untuk memadankan CSS itu. Terdapat juga beberapa alat yang hebat untuk menjana penanda yang anda perlukan.

Saya tidak akan menerangkan alat ini secara terperinci, tetapi anda boleh menyemak contoh dan dokumentasi mereka.

Styledocco adalah modul NPM yang mengambil markdown yang ditulis dalam blok komen CSS dan menghasilkan HTML yang sepadan.

Hologram adalah permata ruby ​​yang juga menggunakan markdown dalam blok komen CSS untuk membuat markup panduan gaya.

Kesimpulan

Jubin gaya adalah cara yang baik untuk menunjukkan kepada pelanggan anda visi reka bentuk tanpa secara tidak disangka-sangka meyakinkan mereka bahawa mereka mendapat laman web bersaiz tetap, pixel-sempurna. Mereka membantu pelanggan memahami kelancaran laman web mereka semasa masih menyampaikan sifat reka bentuk visual. Sass memudahkan kita menjana jubin gaya ini menggunakan alat seperti pemetaan dan gelung.

Adakah anda menggunakan sass untuk membuat jubin gaya atau prototaip lebih mudah? Tolong beritahu kami dalam komen!

Atas ialah kandungan terperinci Jubin gaya dengan sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!