Cara Memulai dengan SASS

Kelancangan adalah alat yang ampuh yang membawa banyak fitur dari bahasa pemrograman lain ke dalam CSS - seperti fungsi, variabel dan loop - serta membawa fitur intuitifnya sendiri seperti campuran, bersarang, dan sebagian.

Dalam tutorial ini kami akan membuat ikon sosial menggunakan loop SASS, mixins dan fungsi. Kami juga akan menggunakan bersarang yang kuat yang tersedia di SASS.

• Apa itu SASS?

Kami akan membuat daftar di SASS untuk menghasilkan ikon sosial kami, yang akan terdiri dari ClassName, referensi font dan warna pertama - dan kemudian Tooltip.

Dan kami akan menggunakan mixin untuk membuat kueri media yang dapat digunakan kembali dan membuat fungsi untuk mengubah nilai piksel menjadi nilai EM. Untuk melakukan ini, kami juga akan membuat variabel untuk ukuran font dasar kami.

Ada sejumlah cara untuk menginstal dan menggunakan SASS tergantung pada sistem Anda dan kebutuhan perkakas build Anda - lebih detail dapat ditemukan sini - Namun, kami akan menggunakan Codepen untuk mengkompilasi SASS kami ke dalam CSS untuk menjaga hal-hal sesederhana mungkin.

Untuk benar-benar memanfaatkan kekuatan SASS dan tidak mendapatkan diri Anda dengan spesifisitas dan kompleksitas pemahaman yang kuat tentang CSS diperlukan. Rasa khusus SASS yang akan kita gunakan adalah SCSS (Sassy CSS), yang berarti kita masih akan menggunakan braket keriting {} dalam kode SASS kita.

Dapatkan file tutorial

Untuk mengunduh file contoh untuk tutorial ini, kunjungi FileSilo. , Pilih barang gratis dan konten gratis di sebelah tutorial. Catatan: Pengguna pertama kali harus mendaftar untuk menggunakan filesilo.

01. Siapkan codepen css Anda

Hal pertama yang perlu kita lakukan adalah Buat pena baru dan ubah beberapa pengaturan default untuk editor CSS di Codepen. Kami akan mengubah preprocessor CSS ke SCSS dan menyalakan normalisasi dan autoprefixer.

02. Mulai menulis kode

Sekarang kami telah mengatur semuanya, kami dapat mulai menulis beberapa kode. Di dalam editor HTML kami akan membuat wadah dan sejumlah item di dalam berisi tautan dan ikon untuk setiap ikon kami.

Nama-nama yang digunakan di sini akan digunakan dalam daftar SASS kami sebagai referensi dalam CSS. Kami juga akan menggunakan konvensi penamaan BEM untuk nama kelas kami.

 & lt; div class = "Social__Container" & gt;
  & lt; div class = "social__item" & gt;
  & lt; target = "_ blank" href = "..."
  Kelas = "Social__icon - Twitter" & gt;
  & lt; i class = "icon - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Tetapkan gaya dasar

Pindah ke Editor CSS Kami akan mulai dengan memasukkan font-luar biasa, mengatur variabel untuk ukuran font dasar kami dan beberapa gaya dasar untuk halaman tersebut.

 @Import URL (http://srt.lt/w8yt8);
// variabel
$ Basis-font-font: 16px;
// Styling Dasar
tubuh {
  ukuran font: $ ukuran font dasar;
  ...
} 

04. Buat fungsi dasar

Selanjutnya kami akan membuat fungsi dasar untuk mengubah nilai piksel ke nilai EM menggunakan variabel 'ukuran font-font-font' kami.

Fungsi dalam SASS dibuat menggunakan '@function' diikuti dengan nama fungsi dan input yang digunakan untuk melakukan fungsi.

Kemudian di dalam deklarasi yang kami gunakan '@return' untuk menampilkan nilai saat menggunakan fungsi. '# {{}' Di sekitar perhitungan digunakan untuk interpolasi .

 // Fungsi
@function px-to-em ($ piksel) {
@return # {$ piksel / $ font-font} em;
} 

05. Buat mixins.

Melanjutkan dengan pengaturan kami, kami akan membuat mixin untuk query media seluler-pertama sederhana menggunakan fungsi 'px-to-em' kami, yang akan kami lewati dalam nilai PX untuk mengembalikan nilai EM.

Mixin dibuat menggunakan '@mixin' diikuti oleh nama untuk mixin. Kemudian di dalam deklarasi yang kami gunakan '@content' untuk menampilkan kode yang kami masukkan ke dalam mixin saat meneleponnya nanti di basis kode kami.

 @mixin viewport - besar {
  @Media hanya layar dan
  (Lebar min: px-to-em (1680px)) {
  @kandungan;
}}
@mixin viewport - medium {
  @Media hanya layar dan
  (Min-Lebar: px-to-em (1080px)) {
  @kandungan;
}} 

06. Siapkan daftar SASS

Langkah terakhir dalam pengaturan kami adalah membuat daftar. Daftar dalam SASS dibuat menggunakan variabel; Setelah itu sintaksis yang tepat cukup longgar, menerima berbagai macam cara untuk mendefinisikannya .

Di dalam variabel kita akan mendefinisikan nama kelas, nilai unicode dan warna untuk setiap ikon, memisahkannya dengan koma, kurung bagian dalam.

 $ ikon-Daftar: (
  Vimeo "\ F27D" # 1AB7EA,
  Twitter "\ F099" # 1DA1F2,
  ...
  GitHub "\ F113" # 333,
  RSS "\ F09E" # F26522
); 

07. Tampilkan ikon Anda berturut-turut

Agar ikon sosial kami ditampilkan secara berturut-turut kami akan menambahkan beberapa CSS sederhana untuk masing-masing wadah mereka.

 .Social__item {
  Tampilan: blok inline;
  Margin-Right: 0,05EM;
} 

08. Buat gaya ikon bersama

Untuk meminimalkan jumlah CSS yang kami output, kami akan menggunakan pemilih CSS3 untuk menemukan semua kelas yang dimulai dengan 'ikon' dan membuat gaya bersama untuk mereka.

 [kelas ^ = "ikon"] {
  Font-Family: 'FontAwesome';
  Bicara: Tidak ada;
  gaya font: normal;
  Font-weight: Normal;
  Font-varian: Normal;
  Teks-transformasi: Tidak ada;
  Tinggi garis: 1;
  -webkit-font-font: antialiased;
  -MOZ-OSX-font-font: Grayscale; } 

09. Style Up Button Backgrounds

Menggunakan metode yang sama kami akan melakukan hal yang sama untuk tombol yang mendefinisikan nilai-nilai kami di 'EM', memungkinkan kami kemudian mengubah ukurannya menggunakan wadah.

 [kelas ^ = "social__icon"] {
  Ukuran font: 1EM; Lebar: 2em; Tinggi: 2em;
  Latar Belakang - Warna: # 333;
  warna putih;
  dekorasi teks: tidak ada;
  BORDER-RADIUS: 100%;
  Teks-Align: Center;
  Tampilan: Flex;
  Align-Item: Center;
  membenarkan konten: pusat;
} 

10. @each loop untuk ikon kami

Sekarang kami memiliki semua gaya dasar kami, kami dapat menggunakan daftar kami untuk menghasilkan CSS khusus untuk setiap ikon.

Untuk membuat loop dalam SASS, kami menggunakan '@each' diikuti dengan nama untuk setiap nilai setiap item - '$ ikon', '$ unicode' dan '$ ikon-latar belakang' - diikuti oleh kata 'in' dan kemudian nama daftar.

Di dalam loop kita akan menerapkan nilai '$ unicode' ke elemen pseudo 'sebelum' dari setiap ikon yang telah kami buat di HTML, memungkinkan gaya bersama yang kami buat sebelumnya untuk mengurus semua gaya lain yang dibutuhkan.

 @Aps $ ICON, $ Unicode, $ ikon-latar belakang
dalam daftar $ ikon {
  .icon - # {$ icon} {
  & amp; :: sebelum {
  Konten: $ Unicode;
  }
  }
} 

11. @each loop untuk warna latar belakang kami

Ikon sekarang semuanya berfungsi tetapi kami masih memiliki warna latar belakang fallback. Kami akan menambahkan beberapa kode lagi ke daftar kami untuk memperbaikinya. Menggunakan metode yang sama seperti di atas kami akan menampilkan nama '$ ICON' tetapi kali ini di kelas 'Social__icon' dan di dalam warna '$ ikon-latar belakang'.

 @Aps $ ICON, $ Unicode, $ ikon-latar belakang
dalam daftar $ ikon {
  ...
  .social__icon - # {$ ikon} {
  Latar Belakang-warna: $ ikon-latar belakang;
  }
} 

12. Gunakan mixin

Menggunakan mixin yang kami buat sebelumnya dan karena kami menata ikon menggunakan nilai-nilai 'EM', kami dapat menerapkan ukuran font ke wadah dan meningkatkannya menggunakan mixin kueri media kami menggunakan '@include' dan nama mixin diikuti oleh. kode yang ingin kita sertakan dalam kueri media.

 .social__container {
  Ukuran font: 1EM;
  @include viewport - medium {
  Ukuran font: 1.5EM;
  }
  @include viewport - besar {
  Ukuran font: 2EM;
  }} 

13. Tambahkan status interaksi dan fungsi bawaan

Kami dapat menambahkan beberapa interaktivitas ke tombol kami dengan mengubah warna latar belakang ketika tombol berinteraksi dengan menggunakan mouse atau keyboard.

SASS memiliki sejumlah fungsi warna bawaan memungkinkan kami untuk mengambil warna latar belakang yang telah kami atur dalam daftar kami dan campur dengan hitam untuk menggelapkan tombol - ketika berinteraksi dengan.

 Ikon - # {$ ikon} {
  Latar Belakang-warna: $ ikon-latar belakang;
  & amp;: hover,
  & amp;: fokus,
  & amp;: aktif {
  warna latar belakang:
  Campur (hitam, $ ikon-latar belakang, 15%);
  }} 

14. Transisi warna latar belakang

Kami juga dapat memanfaatkan properti 'transisi' di CSS untuk menghidupkan perbedaan antara warna latar belakang. Kita dapat menggunakan nilai 'semua' tetapi keduanya mahal dalam hal kinerja dan tidak akan memungkinkan kita untuk mentransisikan nilai yang berbeda pada waktu dan fungsi waktu yang berbeda.

 [Kelas ^ = "Social__icon"]{
  ...
  Transisi: Warna latar belakang
  150ms lebih mudah
  ;
} 

15. Tambahkan efek transisi lebih lanjut

Dengan menambahkan posisi 'relatif' ke tombol dan nilai tertinggi dan menambahkan 'atas' ke properti 'transisi' kami, kami dapat menyiapkan elemen untuk interaksi lebih lanjut.

 [kelas ^ = "social__icon"] {
  Posisi: Relatif;
  TOP: 0;
  ...
  Transisi: Warna latar belakang
   150msual-out,
    Top 250ms linear.
  ; } 

16. Pindahkan tombol ke atas interaksi

Untuk interaksi ini tidak ada yang perlu untuk membuatnya karena itu kita dapat menambahkan kode ke kelas bersama. Dengan menerapkan nilai tertinggi negatif dan menghilangkan garis besar, kami memiliki isyarat interaksi visual yang lebih jelas.

 [kelas ^ = "social__icon"] {
  ...
  & amp;: hover,
  & amp;: fokus,
  & amp;: aktif {
  Garis Besar: Tidak Ada;
  TOP: -0.25em;
  }} 

17. Tambahkan Bayangan Drop

Kami juga dapat menggunakan metode yang sama untuk membuat dan menghidupkan 'box-shadow' - menambahkan sedikit lebih mendalam ke interaksi - mengubah ketinggian vertikal bayangan pada saat yang sama dengan nilai tertinggi.

 Box-Shadow:
  0 0 0.25em -0.25em RGBA (0,0,0,0.2);
& amp;: hover,
& amp;: fokus,
& amp;: aktif {
  ...
  Box-shadow:
  0 0.5em 0.25em -0.25em RGBA (0,0,0,0,3);
} 

18. Tambahkan tooltips.

Kami dapat dengan mudah menambahkan tooltips dengan CSS untuk menambah kejelasan lebih lanjut untuk pengguna kami. Hal pertama yang akan kita lakukan adalah menambahkan nilai tooltip ke daftar. Pastikan untuk menulisnya dalam kutipan untuk memungkinkan penggunaan spasi jika diperlukan.

 $ ikon-Daftar: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" "\ F099" # 1DA1F2,
  ...
  GitHub "GitHub" "\ F113" # 333,
  RSS "RSS" "\ F09E" # F26522,
); 

19. Ubah loop @each

Karena penambahan daftar kami, kami harus memodifikasi loop '@each' kami untuk memasukkan nilai tooltip ($ nama '). Kami kemudian dapat menampilkan nama itu sebagai konten elemen 'sebelum pseudo' pada tombol kami.

 @each $ ICON, $ NAME, $ Unicode,
  $ ikon-latar belakang dalam daftar $ ikon {
  ...
  .social__icon - # {$ ikon} {
  ...
  & amp; :: sebelum {
  konten: '# {$ nama}';
  }
  }} 

20. GAYA SEBELUM UNSUR PSEUDO

Sekarang kita memiliki nama setiap elemen yang ditampilkan pada layar kita perlu menata elemen, menambahkan warna latar belakang, padding dan elemen styling lainnya - serta memposisikan elemen dan menyiapkannya untuk transisi dan memodifikasi opacity dan nilai tertinggi pada interaksi .

 & amp; :: Sebelum {...
  TOP: -3.5em;
  Opacity: 0;
  transisi:
  Top 250ms linear, opacity 150ms linear 150ms;
}
& amp;: hover, ... {...
  & amp; :: sebelum {
  Opacity: 1;
  TOP: -2.5em; }
} 

21. Gaya elemen pseudo setelah

Kami akan menggunakannya Segitiga CSS. Untuk membuat bagian bawah tooltips kami - sekali lagi memposisikan elemen yang menyiapkannya untuk transisi - dengan mentransisikan opacity dan nilai teratas pada timing yang berbeda.

Dengan menambahkan penundaan, kami mendapatkan animasi yang terdiri dari tooltip yang memudar dan bergerak ke tempatnya.

 & amp; :: setelah {...
  TOP: -1.9em;
  Opacity: 0;
  transisi:
  Top 250ms linear, opacity 150ms linear 150ms;
}
& amp;: hover, ... {...
  & amp; :: setelah {
  Opacity: 1;
  TOP: -0.9em; }
} 

Kumpulan codepen dari langkah-langkah tutorial dapat ditemukan sini .

Artikel ini awalnya muncul di majalah Web Designer Magazine 264. Beli di sini .

Baca lebih lajut:

• Apa itu SASS?
• 8 fitur codepen yang tidak Anda ketahui
• 5 Tips untuk CSS Super-Cepat