Bertema dengan Sass: Tutorial SCSS
Diterbitkan: 2022-03-11Pengembangan stylesheet dengan Sass, bahkan saat menggunakan fitur paling dasar, seperti properti atau variabel bersarang, menghemat waktu yang berharga dan membuat hidup lebih mudah bagi pengembang front-end. Tidak mengherankan bahwa pra-prosesor CSS telah diadopsi secara luas sebagai cara de facto untuk menciptakan gaya untuk situs web dan aplikasi; kita tidak bisa hidup tanpa mereka lagi.
Ketika datang ke tema ; yaitu, mengubah tampilan dan nuansa situs web Anda sambil mempertahankan tata letaknya, fitur Sass—seperti mixin atau fungsi—bisa terasa seperti naik pesawat alih-alih berjalan kaki! Dalam tutorial SCSS ini, kita akan membuat tema minimal dan menggunakan SCSS untuk memberikan kekuatan super bagi pemrograman CSS kita.
Pendekatan Mixin Dasar
Katakanlah kita memiliki tata letak berikut:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Kami telah diminta untuk membuat beberapa tema untuk itu. Tema harus berubah warna untuk semua wadah (termasuk wadah utama) dan tombol, dan tema akan ditentukan oleh kelas di badan, atau bisa juga wadah "luar":
<body class="theme-1">Mari buat mixin bernama "themable" yang akan berisi skema warna kita sebagai parameter.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Kemudian gunakan untuk menghasilkan tema kami:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); Pada titik ini, kami telah menghemat banyak waktu, tetapi ada beberapa masalah dengan pendekatan ini:
Tema biasanya memiliki banyak properti berbeda selain warna. Misalnya, jika kita ingin memodifikasi tema Bootstrap, menulis mixin yang mengikuti "resep" sebelumnya akan sulit dipertahankan dan kodenya sulit dibaca. Selain itu, kami tidak benar-benar mengikuti praktik terbaik Sass—misalnya, memasukkan kode warna hex langsung ke dalam mixin.
Rancang Skema Gaya dengan Sass Maps
Dengan bantuan peta, yang sebagian besar seperti array yang diindeks kunci, kita dapat membangun serangkaian gaya yang lebih semantik dan bermakna untuk tema kita, yang akan lebih mudah dipelihara dan dipahami oleh rekan pengembang kita. Kita dapat menggunakan daftar juga, tetapi, secara pribadi, menurut saya peta lebih cocok untuk tujuan ini. Daftar tidak memiliki kunci sementara kunci dapat dijelaskan sendiri.
Peta untuk pendekatan baru kami akan menjadi peta bersarang :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); Jika kita ingin mengakses setiap bagian dari skema theme-1 dan sub-petanya, kita menggunakan direktif @each untuk mengulang masing-masing dari mereka:
@each $section, $map in $theme-1 $section akan mengembalikan kunci dari bagian saat ini, dan $map akan mengembalikan peta bersarang yang sesuai dengan kunci itu.
Kemudian, kita dapat mengakses properti dari setiap peta, misalkan properti background (bg), menggunakan fungsi map-get :
map-get($map, bg)Terakhir, dengan menggabungkan mixin baru kami, berdasarkan struktur peta kami, kami dapat membuat tema sebanyak yang kami suka:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Perhatikan bahwa kami juga menggunakan direktif @if untuk membedakan properti bagian yang bukan tombol.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Dengan cara ini, kita dapat menambahkan properti yang berbeda untuk beberapa bagian untuk membuat properti tertentu atau bahkan aturan, atau kita dapat membedakan antara kunci dengan nilai tunggal dari yang lain dengan peta bersarang.
Tema kita juga bisa terdiri dari banyak peta yang digunakan oleh beberapa mixin, diterapkan di berbagai bagian stylesheet kita. Itu semua tergantung pada kompleksitas tata letak dasar kami dan, tentu saja, pendekatan pribadi kami.
Optimasi Lebih Lanjut
Sass menawarkan fungsi bawaan yang berguna untuk menghemat lebih banyak pekerjaan; misalnya, fungsi hsl seperti lighten atau darken untuk menghitung, misalnya, warna tombol saat melayang di atasnya.
Kita dapat memodifikasi kode tombol untuk mencerahkan latar belakangnya saat melayang, terlepas dari warna latar belakang aslinya. Dengan cara ini, kita tidak perlu menambahkan warna lain untuk status ini.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }Selain itu, dengan penggunaan modul Sass, kode kita bisa lebih terbaca dan terukur; setiap peta tema dapat dimuat dalam modul dan kemudian diimpor ke lembar gaya utama kita.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Ini akan membutuhkan modul untuk ditempatkan dalam proyek sebagai:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
Jika Anda tertarik untuk mempelajari lebih lanjut tentang menggunakan Sass untuk MENGERINGKAN CSS Anda, sesama Toptaler Justin Brazeau dan penggemar Sass membahas hal ini dalam artikel briliannya Sass Mixins: Keep Your Stylesheets DRY .