Apa Itu Sas? Pelajari Cara Menggunakan Bahasa Ekstensi CSS Ini

Style sheet (Sass) yang mengagumkan secara sintaksis adalah bahasa ekstensi CSS yang populer. Bahasa ini telah ada selama sekitar 15 tahun. Ini bekerja dengan baik dengan setiap versi CSS, membuatnya kompatibel dengan setiap pustaka dan kerangka kerja CSS, dari Bootstrap hingga Foundation.

Bahasa ini memungkinkan Anda untuk menulis kode Sass dan kemudian mengkompilasi kode itu ke dalam CSS. Nilai menggunakan Sass daripada CSS biasa adalah ia menyediakan fitur tambahan yang saat ini berada di luar cakupan CSS.

Dalam tutorial ini, Anda akan belajar cara menggunakan Sass dan fitur terpentingnya.

Memasang Sass

Ada beberapa cara untuk menggunakan Sass di perangkat Anda. Ini termasuk menjalankan aplikasi (seperti LiveReload atau Scout-App), mengunduh Sass dari GitHub, atau menginstalnya menggunakan npm.

Menginstal Sass Dengan npm

Untuk menginstal Sass menggunakan npm, Anda harus instal NodeJS dan npm di perangkat Anda. Maka Anda harus membuat package.json file (yang merupakan praktik yang baik saat menginstal paket npm apa pun di proyek Anda). Anda dapat membuat dasar

package.json file di direktori proyek Anda dengan perintah terminal berikut:

npm init -y

Menjalankan perintah ini akan menghasilkan file package.json dengan konten berikut:

{
 "nama": "aplikasi_saya",
 "versi": "1.0.0",
 "keterangan": "",
 "utama": "index.js",
 "skrip": {
 "test": "echo \"Kesalahan: tidak ada tes yang ditentukan\" && keluar 1"
 },
 "kata kunci": [],
 "Pengarang": "",
 "lisensi": "ISC"
}

Itu package.json file penting karena berfungsi sebagai konfigurasi untuk proyek Anda. Setiap kali Anda menginstal paket npm baru, package.json file akan mencerminkan ini.

Sekarang Anda dapat menginstal Sass dengan memasukkan perintah berikut ke terminal Anda:

npm instal sass

Perintah ini akan memperbarui package.json file dengan membuat yang baru bidang ketergantungan, yang akan berisi paket Sass baru. Itu juga akan menghasilkan paket-lock.json file dan instal sass (ditambah dependensi) ke dalam simpul_modul direktori.

Berbagai Jenis File Sass

File Sass dapat memiliki salah satu dari dua ekstensi, .kelancangan atau .scss. Perbedaan utama di antara mereka adalah bahwa .scss file menggunakan kurung kurawal dan titik koma (seperti CSS), sedangkan .kelancangan struktur file CSS menggunakan lekukan (seperti Python). Beberapa pengembang lebih suka menggunakan .scss file karena strukturnya lebih dekat dengan CSS.

Contoh File .scss

$warna-primer: biru;
tubuh {
 warna: $warna-primer;
 P {
 warna merah;
 }
}

Contoh File .sass

$warna dasar: biru
tubuh
 warna: $warna primer
 P
 warna merah

Mengkompilasi File Sass ke CSS

Anda dapat mengkompilasi file Sass individu menggunakan kelancangan program baris perintah:

sass file.scss > file.css

Anda juga dapat menjalankan sass di semua file dalam direktori tertentu:

sass scss: dist/css/

Perintah itu mengkompilasi semua file Sass di dalam scss direktori dan menyimpan file yang dihasilkan di dist/css.

Jika Anda menggunakan npm, Anda dapat mengatur pintasan yang nyaman untuk kompilasi sass menggunakan skrip bidang di Anda package.json mengajukan:

"skrip": {
 "test": "echo \"Kesalahan: tidak ada tes yang ditentukan\" && keluar 1",
 "sass": "sass --watch scss: dist/css/"
 },

Konfigurasi ini menggunakan --jam tangan pilihan. Itu membuat sass berjalan dan memastikannya mengkompilasi ulang file-file itu setiap kali mereka berubah. Untuk setiap file, sass akan menghasilkan .css dan .css.map mengajukan.

Untuk menjalankan skrip Sass di atas, Anda harus menjalankan perintah berikut di terminal Anda:

npm run sass

Menjalankan perintah itu akan menghasilkan output yang mirip dengan ini:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Kompilasi scss\main.scss ke dist\css\main.css.
Sass memperhatikan perubahan. Tekan Ctrl-C untuk berhenti.

Variabel Sass

Anda dapat membuat variabel dalam CSS hari ini, tetapi 15 tahun yang lalu variabel CSS tidak ada, jadi dukungan Sass untuk mereka sangat berharga. Variabel Sass beroperasi dengan cara yang sama seperti variabel CSS. Mereka menyimpan nilai (seperti warna) yang ingin Anda gunakan di seluruh file CSS. Salah satu manfaat utama variabel adalah memungkinkan Anda memperbarui banyak kemunculan suatu nilai dengan mengubahnya hanya di satu tempat.

Setiap variabel Sass dimulai dengan tanda dolar, diikuti dengan kombinasi karakter apa pun. Cobalah untuk membuat variabel Anda deskriptif, seperti $warna primer contoh di atas. Penting untuk dicatat bahwa variabel Sass tidak dikompilasi menjadi variabel CSS. Misalnya, file .scss ini:

$warna-primer: biru;
tubuh {
 warna: $warna-primer;
}

Akan dikompilasi ke CSS berikut:

tubuh {
 warna biru;
}

Seperti yang Anda lihat dari file di atas tidak ada variabel CSS. Keuntungan dari variabel adalah bahwa setiap perubahan yang dibuat pada file Sass akan memperbarui file CSS yang sesuai.

Campuran Sass

Jika Anda memiliki satu properti yang ingin Anda gunakan beberapa kali selama proyek Anda, maka sebuah variabel sangat bagus. Tetapi jika Anda memiliki sekelompok properti yang ingin Anda gunakan sebagai satu unit, mixin akan melakukan triknya.

Setiap mixin dimulai dengan @mixin kata kunci, diikuti dengan nama yang ingin Anda tetapkan ke mixin. Anda memiliki opsi untuk meneruskan variabel ke mixin sebagai parameter dan menggunakan variabel tersebut di dalam badan mixin, dengan cara yang hampir sama seperti fungsi.

Menggunakan Mixin

@mixin light-theme($primary-color: putih, $secondary-color: #2c2c2c) {
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 warna-latar belakang: $warna-primer;
 warna: $warna sekunder;
}
#rumah {
 @include light-theme (biru);
}

Hal pertama yang mungkin Anda perhatikan dalam kode di atas adalah bahwa mixin menerima dua argumen. Anda dapat menetapkan nilai default ke argumen dan menimpanya saat Anda menyertakannya.

Setelah membuat mixin, Anda dapat menggunakannya di bagian mana pun di situs web Anda menggunakan @termasuk kata kunci diikuti dengan nama mixin.

Mengkompilasi kode Sass di atas akan menghasilkan kode CSS berikut di file tujuan Anda:

#rumah {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 warna latar: biru;
 warna: #2c2c2c;
}

Fungsi Sass

Terlepas dari kata kunci yang berbeda, perbedaan utama antara fungsi dan mixin adalah bahwa fungsi harus mengembalikan sesuatu. Anda dapat menggunakan fungsi Sass untuk menghitung nilai atau melakukan operasi.

@fungsi add-angka($angka-satu, $angka-dua){
 $jumlah: 0;
 $jumlah: $angka-satu + $angka-dua;
 @kembalikan $jumlah 
}

Fungsi di atas menerima dua angka dan mengembalikan jumlah mereka. Fungsi Sass bahkan dapat berisi pernyataan if, for loop, dan pernyataan aliran kontrol lainnya.

Modul Sass

Jika Anda harus memasukkan semua variabel, mixin, dan fungsi dalam file yang sama, Anda akan memiliki file Sass yang sangat besar saat membuat aplikasi besar. Modul menyediakan cara untuk membagi file besar menjadi file yang lebih kecil yang digabungkan selama kompilasi. Misalnya, Anda dapat memiliki modul fungsi dan modul mixin, yang perlu Anda ingat adalah @menggunakan kata kunci.

Berikut adalah contoh yang menunjukkan bagaimana Anda dapat memisahkan mixin sebelumnya ke dalam filenya sendiri:

File mixins.scss

@mixin light-theme($primary-color: putih, $secondary-color: #2c2c2c) {
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 warna-latar belakang: $warna-primer;
 warna: $warna sekunder;
}

File utama.scss

@gunakan 'campuran';
#rumah{
 @include mixins.light-theme;
}

Untuk mengimpor dan menggunakan file eksternal sebagai modul, Anda harus menggunakan @menggunakan kata kunci untuk mengimpornya. Kemudian, untuk menggunakan mixin tertentu dari file yang diimpor, awali nama mixin tertentu dengan nama file diikuti dengan titik. Mengkompilasi file-file di atas akan menghasilkan kode CSS berikut:

#rumah {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 latar belakang-warna: putih;
 warna: #2c2c2c;
}

Gunakan Sass untuk Memperluas dan Mengatur CSS Anda

Sass adalah perpanjangan dari sintaks CSS. Ini memungkinkan Anda untuk merampingkan lembar gaya Anda dan mengelolanya dengan lebih efisien. Tetapi Anda masih harus memiliki perintah CSS dan prinsip-prinsip desain web untuk membuat desain yang efektif.

Artikel ini mengajarkan Anda cara menginstal dan menggunakan Sass. Anda telah belajar cara membuat variabel Sass, mixin, fungsi, dan modul. Sekarang yang tersisa untuk Anda lakukan adalah membuat dokumen HTML dan melihat kode Sass Anda menjadi hidup.

8 Tip dan Trik Penting CSS yang Harus Diketahui Setiap Pengembang

Baca Selanjutnya

Tentang Penulis