Ubuntu 16.04 / Cara menginstal Sass

Untuk menginstal Ruby Sass versi lama di Ubuntu 16.04, Anda dapat menggunakan paket ruby-sass dari APT atau gem sass dari RubyGems. Namun, Ruby Sass adalah implementasi yang sudah dihentikan, jadi sebaiknya hanya dipertimbangkan saat mereproduksi proyek yang sudah ada, dan untuk lingkungan pengembangan baru, gunakan OS yang saat ini didukung dan Dart Sass. Menginstal melalui gem juga tidak memasang Dart Sass versi terbaru.

Periksa dukungan implementasi dan OS sebelum menginstal

Sass adalah alat yang mengubah stylesheet yang ditulis dengan variabel dan aturan bersarang menjadi CSS (Cascading Style Sheets). SCSS adalah sintaks Sass yang mirip dengan CSS menggunakan kurung kurawal, dan ekstensi filenya adalah .scss. Bahkan dengan nama perintah yang sama sass, Ruby Sass dan Dart Sass adalah implementasi yang berbeda.

Menurut panduan resmi Sass, Ruby Sass mencapai akhir dukungannya pada tahun 2019. Ubuntu 16.04 juga telah mengakhiri dukungan standarnya maupun Expanded Security Maintenance (ESM), dan per Oktober 2026, dukungan keamanan tambahan memerlukan pengecekan kondisi layanan add-on Legacy Ubuntu Pro. Lingkup dukungan sistem operasi dapat ditemukan di Panduan Ubuntu 16.04 Canonical.

Pertama, cadangkan kode sumber dan CSS yang ada, serta periksa implementasi dan versi yang digunakan dalam proyek Gemfile.lock, package.json, dll. Dua metode instalasi lama di bawah ini adalah alternatif, jadi tidak perlu menginstal keduanya.

Instal Ruby Sass versi lama dengan APT

Untuk meniru paket distribusi yang digunakan di Ubuntu 16.04, periksa di terminal dengan urutan berikut. Anda memerlukan akun yang dapat menjalankan sudo dan akses ke repositori APT yang berfungsi dengan baik.

sudo apt update
apt-cache policy ruby-sass
sudo apt install ruby-sass
sass --version

Field Candidate dalam apt-cache policy menunjukkan versi paket yang dipilih untuk instalasi. Jika tidak ada kandidat atau jika pembaruan gagal, jangan menganggap instalasi bisa dilakukan; pertama periksa pengaturan repository, jaringan, dan status dukungan dari lingkungan. Jangan sembarangan menambahkan repository atau menonaktifkan verifikasi tanda tangan hanya karena paket tidak dapat ditemukan.

Setelah instalasi, versi Sass harus ditampilkan. Versi paket distribusi mungkin berbeda dari versi gem, dan Sass 3.4.23 (Selective Steve) dari posting sebelumnya adalah contoh keluaran sebelumnya. Hasil instalasi saat ini tidak harus cocok dengan string tersebut.

Instal versi legacy yang dibutuhkan dengan RubyGems

Metode ini dapat dipertimbangkan jika proyek yang ada membutuhkan gem Ruby Sass. Di bawah ini adalah contoh yang menentukan 3.7.4, dan jika proyek memerlukan versi yang berbeda, prioritaskan persyaratan tersebut. Informasi Sass 3.7.4 di RubyGems menunjukkan bahwa Ruby 2.0.0 atau yang lebih tinggi diperlukan, tetapi kondisi ini saja tidak berarti semua gem dependensi dapat diinstal pada versi Ruby yang lebih lama.

sudo apt update
sudo apt install ruby
ruby --version
gem --version
gem install --user-install sass -v 3.7.4 --no-document

--user-install adalah opsi untuk menginstalnya di direktori gem pengguna, bukan secara sistem-wide. Jika muncul peringatan bahwa executable tidak dapat ditemukan, ikuti panduan instalasi pengguna RubyGems dan tambahkan bin dari direktori tersebut ke PATH Anda. Di Bash, Anda dapat menerapkan perintah berikut pada terminal Anda saat ini dan kemudian memverifikasinya.

export PATH="$(ruby -r rubygems -e 'print Gem.user_dir')/bin:$PATH"
sass --version

Jika ini adalah pengaturan yang akan terus Anda gunakan, tambahkan baris export di atas ke ~/.bashrc sekali saja dan periksa di terminal baru. Untuk mengembalikan, hapus baris yang ditambahkan dan buka kembali terminal. Jika instalasi gagal, periksa gem dependensi dan versi Ruby yang ditunjukkan dalam kesalahan, dan buat ulang lingkungan berdasarkan file lock yang tersimpan di proyek dan lingkungan pada saat itu. Jangan menonaktifkan verifikasi HTTPS untuk menyelesaikan kesalahan sertifikat atau TLS.

Verifikasi instalasi dengan mengubah SCSS menjadi CSS

Hanya mencetak versi tidak mengonfirmasi konversi yang sebenarnya. Di folder kerja kosong terpisah, buat file style.scss dan simpan seluruh konten di bawah ini. Di folder dengan file yang sudah ada, pastikan terlebih dahulu tidak ada konflik dengan nama file contoh yang sudah ada.

$brand: #336699;

.notice {
  color: $brand;
  strong {
    font-weight: 700;
  }
}

Menjalankan perintah berikut di folder itu akan menghasilkan style.css.

sass style.scss style.css

CSS yang dihasilkan harus berisi selector dan nilai berikut. Tergantung pada implementasi dan pengaturan format output, spasi, pemecahan baris, atau komentar peta sumber dapat berbeda.

.notice {
  color: #336699;
}

.notice strong {
  font-weight: 700;
}

Ubah nilai warna dan konversi kembali untuk melihat apakah nilai dalam CSS berubah, mengonfirmasi hubungan antara file input dan output. Mengembalikan ke nilai asli dan menjalankan lagi akan mengembalikan keadaan contoh. Konversi Sass adalah proses membuat file CSS, dan untuk menerapkannya ke halaman web, Anda perlu memuat CSS output di HTML yang sesuai.

Saat perintah bertentangan atau instalasi perlu dikembalikan

Jika sass: command not found muncul setelah instalasi, periksa apakah instalasi berhasil dan tinjau PATH. Jika muncul versi yang berbeda dari yang diharapkan, lihat executable mana yang dipilih pertama—apakah diinstal melalui APT, gem pengguna, atau alat lain.

command -v sass
type -a sass
sass --version

Menempatkan bin dari gem pengguna di depan PATH dapat memberikan prioritas pada perintah tersebut. Di lingkungan dengan instalasi duplikat melalui APT dan gem, jangan hanya melihat nomor versi; catat juga path-nya. Alih-alih menghapus file secara sembarangan, hapus menggunakan alat manajemen yang digunakan untuk instalasi.

• Untuk mengembalikan instalasi APT, gunakan sudo apt remove ruby-sass. Sebelum menjalankan, baca daftar item yang akan dihapus dan pastikan tidak digunakan oleh proyek lain.
• Untuk menghapus gem pengguna dalam contoh di atas, gunakan gem uninstall --user-install sass -v 3.7.4. Tidak perlu menghapus versi lain atau dependensi yang dibagikan secara massal.
• Jika kesalahan disebabkan oleh sintaks SCSS modern yang tidak kompatibel, hanya dengan menginstal ulang mungkin tidak akan menyelesaikannya. Bangun dengan implementasi yang diperlukan oleh proyek, atau tinjau kode untuk beralih ke Dart Sass.

Beralih ke Dart Sass di lingkungan baru

Implementasi referensi Sass saat ini adalah Dart Sass. Dokumentasi instalasi resmi membimbing Anda untuk menginstal distribusi mandiri atau instalasi npm yang sesuai dengan sistem operasi dan CPU Anda. Contoh npm di bagian ini harus dijalankan di lingkungan pengembangan terpisah yang disiapkan dengan sistem operasi yang didukung dan Node.js yang diperlukan oleh versi Sass yang bersangkutan, dan ini tidak mengasumsikan eksekusi pada Node.js default dari Ubuntu 16.04.

Setelah Node.js dan npm siap, Anda dapat menginstal dependensi pengembangan spesifik proyek di folder proyek baru dengan perintah berikut. Saat diterapkan pada proyek yang sudah ada, pertama buat cadangan package.json dan file lock, kemudian periksa pengaturan build yang sudah ada.

npm init -y
npm install --save-dev sass
npx sass --version
npx sass style.scss style.css

Sebelum menjalankan perintah terakhir, Anda harus menyimpan style.scss dari bagian sebelumnya di folder yang sama. npx sass menggunakan Sass lokal proyek yang diinstal melalui prosedur ini dan mungkin berbeda dari perintah dan versi sass global. Anda dapat memverifikasi hasil instalasi dengan npm ls sass dan CSS yang dihasilkan. Dependensi pengembangan yang ditambahkan dalam contoh ini dapat dihapus dengan npm uninstall --save-dev sass.

Saat mentransfer proyek lama, bandingkan hasil konversi pada cabang uji atau salinan, dan tinjau perbedaan CSS dan peringatan sebelum menerapkannya. Anda dapat memeriksa perintah dan opsi untuk konversi satu file dalam dokumentasi baris perintah Dart Sass. Menginstal Ruby Sass dan beralih ke Dart Sass saat ini merupakan tugas yang terpisah.