Menggunakan Sass

SASS lebih kuat dan stabil yang memberikan kekuatan pada bahasa dasar dengan menggunakan ekstensi CSS. Anda dapat menggunakan SASS dengan tiga cara berbeda -

Sebagai alat baris perintah
Sebagai modul Ruby
Sebagai plugin untuk kerangka kerja Rack enable

Jika Anda menggunakan SASS di windows, maka Anda perlu menginstal Rubypertama. Untuk informasi lebih lanjut tentang menginstal Ruby, lihat bab Instalasi SASS .

Tabel berikut menunjukkan perintah, yang digunakan untuk menjalankan kode SASS -

No. S.	Perintah & Deskripsi
1	sass input.scss output.css Ini digunakan untuk menjalankan kode SASS dari baris perintah.
2	sass --watch input.scss:output.css Ini memberi tahu SASS untuk menonton file dan memperbarui CSS setiap kali file SASS berubah.
3	sass --watch app/sass:public/stylesheets Ini digunakan untuk mengawasi seluruh direktori, jika SASS berisi banyak file dalam satu direktori.

Plugin Rack / Rails / Merb

Rackadalah antarmuka server web, yang digunakan untuk mengembangkan aplikasi web di Ruby. Untuk informasi tentang Rack, kunjungi tautan ini .

Anda dapat mengaktifkan SASS di Rails 3 versi menggunakan environment.rb file yang ada di bawah configmap. Aktifkan SASS untuk Rails 3 menggunakan kode berikut -

config.gem "sass"

Anda dapat menggunakan baris berikut ke Gemfile untuk Rails 3 (dan versi di atasnya), sebagai -

gem "sass"

Railsadalah kerangka kerja web sumber terbuka yang menggunakan standar web seperti JSON, HTML, CSS dan JavaScript untuk menampilkan antarmuka pengguna. Untuk bekerja dengan Rails, Anda harus memiliki pengetahuan dasar tentang Ruby dan pemrograman berorientasi objek. Pelajari lebih lanjut tentang kerangka Rails di sini .

Jika Anda ingin mengaktifkan SASS di Rack aplikasi, tambahkan baris berikut ke config.ru file, yang ada di direktori root aplikasi -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merbadalah kerangka kerja aplikasi web, yang menyediakan kecepatan dan modularitas ke Rails. Untuk mengetahui lebih banyak tentang Merb, cukup buka tautan ini .

Anda dapat mengaktifkan SASS di Merb dengan menambahkan baris berikut ke config/dependencies.rb file -

dependency "merb-haml"

Caching

SASS menyimpan dokumen dalam cache seperti templat dan parsial, yang dapat digunakan kembali tanpa menguraikannya kecuali telah diubah. Itu membuat kompilasi file SASS lebih cepat dan bekerja lebih baik ketika templat dibagi menjadi file terpisah, yang semuanya diimpor ke dalam satu file besar. Jika Anda menghapus file yang di-cache, file tersebut akan dibuat lagi saat Anda mengkompilasi di lain waktu.

Pilihan

Anda dapat mengatur opsi di file environment.rb dari Rails atau file config.ru dari aplikasi Rack dengan menggunakan baris berikut -

Sass::Plugin.options[:style] = :compact

Anda juga dapat mengatur opsi di file init.rb Merb dengan menggunakan baris berikut -

Merb::Plugin.config[:sass][:style] = :compact

Ada beberapa opsi yang tersedia dengan SASS dan SCSS seperti yang dijelaskan dalam tabel yang diberikan di bawah ini -

No. S.	Opsi & Deskripsi
1	:style Ini menampilkan gaya keluaran.
2	:syntax Anda dapat menggunakan sintaks berlekuk untuk sass dan sintaks ekstensi CSS untuk scss .
3	:property_syntax Ini menggunakan sintaks berlekuk untuk memanfaatkan properti. Jika tidak benar, maka akan menimbulkan error. Misalnya, pertimbangkan "background: # F5F5F5" di mana latar belakang adalah nama properti dan # F5F5F5 adalah nilai propertinya. Anda harus menggunakan titik dua setelah nama properti.
4	:cache Ini mempercepat kompilasi file SASS. Ini disetel ke true secara default.
5	:read_cache Itu hanya membaca file SASS jika cache tidak disetel dan read_cache disetel.
6	:cache_store Ini bisa digunakan untuk menyimpan dan mengakses hasil yang di-cache dengan menyetelnya ke turunan dari Sass :: CacheStores :: Base .
7	:never_update Seharusnya tidak pernah memperbarui file CSS jika file template berubah. Secara default disetel ke false.
8	:always_update Ini harus memperbarui file CSS setiap kali file template berubah.
9	:always_check Ini harus memeriksa pembaruan setiap kali server dimulai. Ini akan mengkompilasi ulang dan menimpa file CSS, jika ada pembaruan di file template SASS.
10	:poll Ia menggunakan polling backend untuk Sass :: Plugin :: Compiler # watch (yang mengawasi template dan pembaruan file CSS) dengan menyetelnya ke true.
11	:full_exception Ini menampilkan deskripsi kesalahan setiap kali terjadi pengecualian dalam kode SASS dalam file CSS yang dihasilkan. Ini menampilkan nomor baris di mana kesalahan terjadi bersama dengan sumber di file CSS.
12	:template_location Ini menyediakan jalur untuk direktori template dalam aplikasi.
13	:css_location Ini menyediakan jalur untuk lembar gaya CSS dalam aplikasi.
14	:unix_newlines Ini menyediakan baris baru gaya Unix saat menulis file dengan mengaturnya ke true.
15	:filename Ini adalah nama dari nama file yang ditampilkan dan digunakan untuk melaporkan kesalahan.
16	:line Ini menentukan baris pertama dari template SASS dan menampilkan nomor baris untuk kesalahan.
17	:load_paths Ini digunakan untuk memuat jalur untuk template SASS yang disertakan menggunakan direktif @import .
18	:filesystem_importer Ini digunakan untuk mengimpor file dari sistem file yang menggunakan sub kelas Sass :: Importers :: Base untuk menangani jalur pemuatan string.
19	:sourcemap Ini menghasilkan peta sumber yang menginstruksikan browser untuk menemukan gaya SASS. Ini menggunakan tiga nilai - :auto- Ini berisi URI relatif. Jika tidak ada URI relatif, gunakan URI "file:". :file - Menggunakan URI "file:", yang bekerja secara lokal, bukan pada server jarak jauh. :inline - Ini berisi teks sumber di peta sumber yang digunakan untuk membuat file peta sumber yang besar.
20	:line_numbers Ini menampilkan nomor baris untuk kesalahan yang dilaporkan dalam file CSS dengan menyetelnya ke true.
21	:trace_selectors Ini membantu melacak pemilih impor dan mixin ketika disetel ke true.
22	:debug_info Ini memberikan informasi debug file SASS menggunakan nomor baris dan file ketika diatur ke true.
23	:custom Itu membuat data tersedia untuk fungsi SASS di aplikasi terpisah.
24	:quiet Ini menonaktifkan peringatan dengan mengaturnya ke true.

Pemilihan Sintaks

Anda dapat menentukan sintaks yang Anda gunakan di template SASS dengan menggunakan alat baris perintah SASS. Secara default, SASS menggunakan sintaks indentasi yang merupakan alternatif dari sintaks SCSS berbasis CSS. Anda dapat menggunakan program baris perintah SCSS, yang mirip dengan program SASS, tetapi secara default, ini menganggap sintaks sebagai SCSS.

Pengodean

SASS menggunakan pengkodean karakter stylesheet dengan menentukan spesifikasi CSS berikut -

Pertama, ia memeriksa byte Unicode, deklarasi @charset berikutnya dan kemudian pengkodean string Ruby.
Selanjutnya, jika tidak ada yang disetel, encoding charset dianggap sebagai UTF-8 .
Tentukan pengkodean karakter secara eksplisit menggunakan deklarasi @charset . Cukup gunakan "@charset encoding name" di awal stylesheet dan SASS akan menganggap bahwa ini adalah pengkodean karakter yang diberikan.
Jika file keluaran SASS berisi karakter non-ASCII, maka itu akan menggunakan deklarasi @charset .