Sass Mixin: Jaga Stylesheet Anda KERING

Diterbitkan: 2022-03-11

Salah satu manfaat favorit saya menggunakan Sass adalah membuat otomatisasi alur kerja desain front-end menjadi mudah. Ada banyak alat JavaScript untuk bekerja dengan file dan mengotomatiskan tugas lain, tetapi kemampuan mixin bawaan Sass memungkinkan seseorang untuk menulis kode gaya front-end modular. Dalam artikel ini, saya telah membuat daftar sepuluh mixin Sass favorit saya untuk mengotomatiskan penulisan gaya web.

Sass Mixin: Jaga Stylesheet Anda KERING

Ini adalah mixin Sass yang saya gunakan untuk hampir setiap proyek web yang saya kerjakan. Ada banyak artikel menarik dengan beberapa mixin Sass yang berguna di seluruh web. Ada juga beberapa perpustakaan mixin Sass bagus yang bagus untuk tugas yang lebih kecil, seperti Bourbon. Pustaka mixin hebat lainnya yang saya dapatkan dari beberapa mixin di bawah ini adalah Andy.

Mixin yang akan saya bahas dalam artikel ini berkaitan dengan hal-hal berikut:

  • Pertanyaan media
  • Tema warna
  • Elemen pemusatan
  • Hapus perbaikan
  • Ukuran font yang konsisten
  • Transisi animasi
  • gambar retina
  • Gradien cepat
  • Font eksternal
  • Padding/margin cepat

Pertanyaan Media

Kueri media memungkinkan Anda menambahkan titik henti khusus dengan mudah ke lembar gaya Anda, dan dengan cepat menambahkan perilaku responsif khusus dalam elemen untuk titik henti yang berbeda. Namun, kueri media stylesheet membuang sampah sembarangan dapat dengan cepat menjadi penyebab sakit kepala, terutama saat harus mempertahankannya di jalan. Dengan mixin Sass, semua itu bisa berubah.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Dengan ini didefinisikan, mixin dapat digunakan sebagai berikut:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Ini berfungsi dengan baik secara mandiri, atau dengan kerangka kerja grid lain seperti Bootstrap.

Pernyataan if akan memancarkan kueri media yang disetel ke ukuran layar tertentu tergantung pada nama ukuran yang diberikan ke mixin. Ini akan memungkinkan Anda untuk dengan mudah menyesuaikan perilaku atribut CSS Anda. Anda juga dapat menyesuaikan titik di mana Anda ingin menyesuaikan atribut CSS Anda. Biasanya, tata letak yang paling responsif akan menggunakan 3 atau 4 dimensi lebar layar yang ditentukan untuk menyesuaikan konten. Varian ukuran layar, perangkat, dan aplikasi selalu berkembang, tetapi ada tren populer yang akan digunakan banyak pengembang web untuk tata letak mereka; ukuran layar kecil untuk ponsel, sedang untuk tablet, besar untuk laptop, dan ekstra besar untuk komputer desktop.

Untuk referensi, titik media yang digunakan di Bootstrap v3 adalah:

  • max-width: 767px (setiap layar hingga lebar 767px)
  • min-width: 768px (setiap layar lebih dari 768px lebar)
  • min-width: 992px (setiap layar dengan lebar lebih dari 992px)
  • min-width: 1200px (setiap layar lebih dari 1200px lebar)

Tema Warna

Mendefinisikan tema warna untuk digunakan di seluruh situs Anda membantu menghemat waktu untuk memiliki bagian CSS berwarna yang sama pada elemen HTML yang sama. Jika Anda ingin semua tombol div Anda memiliki batas titik padat 1px, maka Anda dapat dengan mudah menambahkan ini ke tema Anda. Mixin Sass ini akan memungkinkan Anda untuk mengatur variabel warna sebanyak yang Anda inginkan, dan untuk mempengaruhi sebanyak mungkin kelas yang Anda inginkan. Ini bisa menjadi alat yang berguna untuk memberikan opsi warna untuk sesuatu, atau kapan pun Anda memiliki fitur yang memengaruhi warna banyak elemen sekaligus. Ada artikel bagus di sini dengan informasi lebih lanjut tentang bekerja dengan tema warna di Sass.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Setelah Anda menyiapkan tema warna yang mendalam, Anda akan menghilangkan 70% gaya terkait warna Anda jika dilakukan dengan benar. Saya juga merekomendasikan untuk memisahkan file .scss ini dari file .scss Anda yang lain, dan menyertakan semua variabel warna merek Anda dalam file yang sama.

Garis sederhana seperti:

 @include theme(theme-banana, yellow);

akan memancarkan:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Elemen pemusatan

Bergantung pada tata letak Anda, ada banyak cara berbeda untuk meratakan tengah elemen dalam gaya Anda. Metode di bawah ini menggunakan penentuan posisi absolut dan akan memungkinkan Anda untuk menentukan elemen vertikal, horizontal, atau keduanya di tengah. Elemen induk harus memiliki position: relative. Ini memungkinkan Anda untuk dengan mudah menentukan posisi tengah elemen dalam 2 baris kode singkat.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }
 .foo { @include center(both); } .foo-parent { position: relative; }

Mixin ini adalah salah satu cara paling serbaguna untuk memusatkan konten, tetapi perlu dicatat bahwa ada banyak cara berbeda untuk memusatkan konten Anda, dan ini mungkin tidak selalu menjadi solusi terbaik. Bergantung pada gaya tata letak dan kelonggaran untuk kompatibilitas browser, Anda mungkin ingin memusatkan konten Anda dengan cara yang berbeda. Flexbox adalah alat lain yang populer dan sangat berguna untuk penyelarasan, meskipun saat ini tidak sepenuhnya didukung oleh browser lama. Penjajaran teks dan wadah sederhana dapat dilakukan dengan mudah tanpa mixin ini, menggunakan properti css sederhana. Yang ini akan lebih membantu Anda saat membuat tata letak dan bekerja dengan wadah di dalam wadah lain.

Hapus perbaikan

Terapkan properti clearfix css dengan cepat dan efektif ke elemen. Ada banyak solusi clearfix di seluruh web, dan solusi ini tampaknya paling berhasil. Ini juga mudah digunakan setelah mixin Sass dibuat.

Mixin ini akan bermanfaat setiap kali Anda memiliki konten yang mengambang ke kanan atau kiri, dan ingin mengosongkan ruang di bawah elemen melayang untuk menyisipkan konten baru di bawah.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
 .container-with-floated-children { @extend %clearfix; }

Ukuran Font yang Konsisten

Atur ukuran font rem di dokumen Anda, untuk digunakan untuk semua elemen teks Anda. Ini adalah cara yang lebih baik untuk memperbesar dan memperkecil font daripada em. Menggunakan em akan digabungkan berdasarkan atribut CSS lainnya, tetapi rem hanya akan ditingkatkan atau diturunkan berdasarkan ukuran yang Anda tentukan dalam dokumen HTML Anda. Memisahkan file .scss untuk semua tipografi Anda dan menggunakan mixin di bawah ini untuk menentukan ukuran font default Anda akan secara drastis mengotomatiskan alur kerja pengkodean tipografi Anda.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }
 p { @include font-size(14px) }

Mixin ini juga membuat mundur piksel untuk browser yang tidak mendukung rem (IE8 dan di bawah). Saat browser tidak mendukung ukuran rem, mixin akan menghitung piksel yang setara dengan ukuran rem awal yang Anda tetapkan dan menampilkan nilai piksel dan rem untuk suatu elemen.

Animasi

Tentukan properti animasi dengan cepat dan tambahkan ke elemen Anda. Saat ini, properti CSS animasi masih membutuhkan awalan vendor, jadi ini juga akan menambahkannya ke dalam campuran.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

Bagian pertama dari mixin akan menambahkan awalan vendor yang tepat yang diperlukan untuk kompatibilitas browser. Bagian selanjutnya mengaturnya untuk memasukkan string dan properti khusus Anda. Bagian terakhir dari mixin adalah di mana Anda akan membuat nama mixin Anda (dalam hal ini: fade-out) dan menentukan apa yang Anda inginkan terjadi pada setiap keyframe dalam animasi. Contoh penyiapan ini sangat mendasar, dan Anda dapat menambahkan perubahan ke persentase berapa pun dari durasi animasi.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

Contoh di sini akan mengambil elemen yang ditargetkan pada 0% dari animasi (awal), dan mentransisikan properti dari opacity penuh (opacity: 1;) menjadi tidak memiliki opacity dan pada dasarnya menghilang (opacity: 0;) pada 90% dari animasi . Jadi jika saya mengatur animasi untuk memiliki timeline 5 detik, elemen tersebut akan hilang setelah 4,5 detik (90% dari animasi 5 detik). Properti terakhir yang saya definisikan dalam penggunaan mixin (“3”) adalah berapa kali animasi akan berulang.

Gambar Retina

Tambahkan gambar resolusi tinggi ke situs Anda, dengan cadangan untuk perangkat yang tidak menampilkan gambar resolusi tinggi. Saat menggunakan gambar retina, saya akan merekomendasikan mengompresi sebanyak mungkin tanpa merusak gambar. Alat yang bagus untuk ini adalah TinyPNG (mendukung PNG dan JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Mixin ini akan memungkinkan Anda untuk menambahkan aturan di tempat yang sama dengan properti CSS yang mendefinisikan gambar asli.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

Sebelumnya, satu-satunya solusi CSS untuk ini adalah menggunakan kueri media, dan solusi ini jauh lebih bersih dan mudah. Untuk lebih banyak pemikiran dan ide tentang mixin ini, lihat artikel ini.

Gradien Cepat

Mudah menambahkan gradien yang hanya menentukan warna awal, warna akhir, dan tipe gradien. Tambahkan semua properti gradien dan Anda dapat memilih sesuai kebutuhan. Jenis gradien memungkinkan Anda memilih dari gradien vertikal, gradien horizontal, atau gradien radial (berbentuk bola).

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Anda tidak lagi harus mengingat berbagai awalan vendor dan urutan parameter untuk menerapkan gradien.

 .foo { @include background-gradient(red, black, 'vertical'); }

Font Eksternal

Menggunakan properti font-face CSS, kita dapat dengan mudah menambahkan font dalam direktori dan menyertakan semua jenis font. Saat menggunakan file font, browser yang berbeda memiliki kompatibilitas yang berbeda dengan jenis file. Mixin ini membantu menyelesaikannya dengan menggunakan file font yang relevan di direktori.

Cukup sertakan file font apa pun dalam direktori, dan tambahkan tag “@include” di gaya Anda, yang akan mengambil semua file dari folder pilihan Anda.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Mixin ini akan berhati-hati dalam menentukan URL format font alternatif, termasuk solusi aneh yang diperlukan untuk kompatibilitas mundur.

Padding & Margin Cepat

Alasan utama saya menggunakan ini adalah karena saya akan menghilangkan properti padding tertentu, seperti padding-left pada waktu tertentu, dan saya tidak ingin mendefinisikannya. Menggunakan properti Sass null, Anda dapat menghilangkan properti padding. Aturan yang sama berlaku untuk margin.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

Pencampuran kemudian dapat digunakan untuk mengganti banyak properti padding-* dan margin-* di seluruh stylesheet Anda. Anda dapat dengan cepat memasukkan mixin ini ke dalam elemen apa pun dan hanya menentukan sisi padding/margin yang ingin Anda sertakan. Padding dan margin adalah salah satu gaya CSS yang paling sering digunakan yang ditambahkan ke elemen, dan penghemat waktu kecil seperti ini akan bertambah dengan cepat.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Bungkus

Menggunakan mixin Sass seperti yang diuraikan dalam artikel ini adalah cara yang bagus untuk membuat alur kerja Anda lebih efisien. Mixin khusus ini akan membantu Anda menghabiskan lebih sedikit waktu untuk tugas web umum, memberi Anda lebih banyak waktu untuk fokus pada aspek lain dari proyek yang memerlukan wawasan yang lebih cermat dan terampil.

Menginstal dan bekerja dengan Sass dapat dilakukan dengan beberapa cara, dan akan melibatkan penggunaan command prompt untuk menginstal beberapa pustaka di proyek Anda. Salah satu cara untuk menginstal Sass adalah dengan menggunakan Ruby - seperti yang dijelaskan di situs web utama Sass di sini - dan cara populer lainnya adalah dengan menggunakan Node.js.

Manfaat Sass melampaui otomatisasi, dan dapat membantu membuat dan mengelola lembar gaya proyek Anda dengan mudah. Bahkan beberapa proyek web paling dasar dapat memiliki ribuan baris kode CSS. Sass adalah cara yang bagus untuk memecah kode ini menjadi bit yang lebih mudah dikelola, masing-masing dengan fokusnya sendiri.

Terkait: Panduan Gaya Sass: Tutorial Sass tentang Cara Menulis Kode CSS yang Lebih Baik