Sass - Panduan Cepat

Apa itu SASS?

SASS (Syntactically Awesome Stylesheet) adalah pra-prosesor CSS, yang membantu mengurangi pengulangan dengan CSS dan menghemat waktu. Ini adalah bahasa ekstensi CSS yang lebih stabil dan kuat yang mendeskripsikan gaya dokumen dengan rapi dan terstruktur.

Awalnya dirancang oleh Hampton Catlin dan dikembangkan oleh Natalie Weizenbaum pada tahun 2006. Kemudian, Weizenbaum dan Chris Eppstein menggunakan versi awalnya untuk memperluas Sass dengan SassScript.

Mengapa Menggunakan SASS?

  • Ini adalah bahasa pra-pemrosesan yang menyediakan sintaks berlekuk (sintaksnya sendiri) untuk CSS.

  • Ini menyediakan beberapa fitur, yang digunakan untuk membuat stylesheet yang memungkinkan penulisan kode lebih efisien dan mudah dipelihara.

  • Ini adalah satu set CSS super, yang artinya berisi semua fitur CSS dan merupakan pra-prosesor open source, dikodekan dalam Ruby.

  • Ini memberikan gaya dokumen dalam format yang baik dan terstruktur daripada CSS datar. Ini menggunakan metode yang dapat digunakan kembali, pernyataan logika dan beberapa fungsi bawaan seperti manipulasi warna, matematika dan daftar parameter.

Fitur SASS

  • Ini lebih stabil, kuat, dan kompatibel dengan versi CSS.

  • Ini adalah satu set CSS yang super dan didasarkan pada JavaScript.

  • Ini dikenal sebagai gula sintaksis untuk CSS, yang berarti memudahkan pengguna untuk membaca atau mengekspresikan sesuatu dengan lebih jelas.

  • Ini menggunakan sintaksnya sendiri dan mengkompilasi ke CSS yang dapat dibaca.

  • Anda dapat dengan mudah menulis CSS dalam lebih sedikit kode dalam waktu yang lebih singkat.

  • Ini adalah pra-prosesor open source, yang diinterpretasikan ke dalam CSS.

Keuntungan SASS

  • Ini memungkinkan penulisan CSS yang bersih dalam konstruksi pemrograman.

  • Ini membantu dalam menulis CSS dengan cepat.

  • Ini adalah superset dari CSS, yang membantu desainer dan pengembang bekerja lebih efisien dan cepat.

  • Karena Sass kompatibel dengan semua versi CSS, kita dapat menggunakan pustaka CSS yang tersedia.

  • Dimungkinkan untuk menggunakan sintaks bertingkat dan fungsi yang berguna seperti manipulasi warna, matematika, dan nilai lainnya.

Kekurangan SASS

  • Perlu waktu bagi pengembang untuk mempelajari fitur-fitur baru yang ada di pra-prosesor ini.

  • Jika banyak orang yang mengerjakan situs yang sama, maka harus menggunakan preprocessor yang sama. Beberapa orang menggunakan Sass dan beberapa orang menggunakan CSS untuk mengedit file secara langsung. Oleh karena itu, menjadi sulit untuk bekerja di situs.

  • Ada kemungkinan kehilangan manfaat dari pemeriksa elemen bawaan browser.

Di bab ini, kita akan mempelajari prosedur langkah demi langkah untuk menginstal Ruby, yang digunakan untuk menjalankan file SASS.

Persyaratan Sistem untuk SASS

  • Operating System - Lintas platform

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

  • Programming Language - Ruby

Instalasi Ruby

Step 1 - Buka tautannya https://www.ruby-lang.org/en/downloads/, Anda akan melihat layar seperti di bawah ini -

Unduh file zip versi stabil saat ini.

Step 2 - Selanjutnya, jalankan setup untuk menginstal Ruby di Sistem.

Step 3- Selanjutnya, tambahkan folder Ruby bin ke Variabel Pengguna PATH dan Variabel Sistem untuk bekerja dengan perintah gem.

Path User Variable -

  • Klik kanan file My Computer ikon.

  • Pilih Properties.

  • Selanjutnya, klik Advanced tab dan klik Environment Variables.

Di jendela Variabel Lingkungan , klik dua kali PATH seperti yang ditunjukkan pada gambar di bawah -

Anda akan mendapatkan kotak Edit Variabel Pengguna seperti yang ditunjukkan. Tambahkan jalur folder ruby ​​bin di bidang nilai Variabel sebagaiC:\Ruby\bin. Jika path sudah diset untuk file lain, maka beri tanda titik koma setelah itu dan tambahkan path folder Ruby seperti yang ditunjukkan di bawah ini.

Klik OK tombol.

System Variable -

  • Klik New tombol.

Selanjutnya, New System Variable blok ditampilkan seperti yang ditunjukkan di bawah ini.

  • Memasukkan RubyOptdi bidang Nama variabel danrubygemsdi bidang nilai variabel . Setelah menuliskan nama dan nilai Variabel , klikOK tombol.

Step 4 - Buka command prompt di sistem Anda dan masukkan baris berikut -

gem install sass

Step 5 - Selanjutnya, Anda akan melihat layar berikut setelah menginstal SASS dengan sukses.

Contoh

Berikut ini adalah contoh sederhana SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Sekarang, kita akan membuat file sebagai style.scss , yang sangat mirip dengan CSS dan satu-satunya perbedaan adalah file tersebut akan disimpan dengan ekstensi .scss. Kedua, file .htm dan .scss harus dibuat di dalam folderruby. Anda dapat menyimpan file .scss Anda di folder tersebutruby\lib\sass\ (sebelum proses ini, buat folder sebagai sass di direktori lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Ketika Anda menjalankan perintah di atas, itu akan membuat file style.css secara otomatis. Setiap kali Anda mengubah file SCSS, file style.css akan diperbarui secara otomatis.

File style.css akan memiliki kode berikut ketika Anda menjalankan perintah yang diberikan di atas -

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

  • Simpan kode yang diberikan di atas hello.html mengajukan.

  • Buka file HTML ini di browser.

Dalam bab ini, kita akan mempelajari tentang SASS Syntax. SASS mendukung dua sintaks yaituSCSS dan Indented syntax.

  • Itu SCSS (Sassy CSS)adalah perpanjangan dari sintaks CSS. Ini berarti setiap CSS yang valid adalah SCSS yang valid juga. SCSS membuat lebih mudah untuk mempertahankan stylesheet besar dan dapat mengenali sintaks khusus vendor, Banyak file CSS dan SCSS menggunakan ekstensi.scss.

  • Indented - Ini adalah sintaks yang lebih lama dan terkadang disebut sebagai SASS. Menggunakan bentuk sintaks ini, CSS dapat ditulis secara ringkas. File SASS menggunakan ekstensi.sass.

SASS Indented Syntax

SASS Indented syntax atau hanya SASS adalah alternatif dari sintaks SCSS berbasis CSS.

  • Ini menggunakan lekukan daripada{ dan } untuk membatasi blok.

  • Untuk memisahkan pernyataan, ini menggunakan baris baru, bukan titik koma (;) .

  • Deklarasi properti dan pemilih harus ditempatkan pada baris dan pernyataannya sendiri di dalamnya{ dan }harus ditempatkan di baris baru dan menjorok ke dalam .

Misalnya, pertimbangkan kode SCSS berikut -

.myclass {
   color = red;
   font-size = 0.2em;
}

Itu indentedsintaks adalah sintaks yang lebih lama, yang tidak disarankan untuk digunakan dalam file Sass baru. Jika Anda menggunakan file ini, maka akan muncul error pada file CSS seperti yang telah kita gunakan= bukan untuk mengatur properti dan variabel.

Kompilasi kode yang diberikan di atas menggunakan perintah berikut -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Selanjutnya, jalankan perintah di atas; itu akan menampilkan kesalahan dalam file style.css seperti yang ditunjukkan di bawah ini -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Perbedaan Sintaks SASS

Kebanyakan sintaks CSS dan SCSS bekerja dengan sempurna di SASS. Namun, ada beberapa perbedaan, yang dijelaskan di bagian berikut -

Sintaks Properti

Properti CSS dapat dideklarasikan dengan dua cara -

  • Properti dapat dideklarasikan mirip dengan CSS tetapi tanpa semicolon(;).

  • colon(:) akan diawali dengan setiap nama properti.

Misalnya, Anda dapat menulis sebagai -

.myclass
   :color red
   :font-size 0.2em

Kedua cara di atas (deklarasi properti tanpa titik koma dan titik dua yang diawali dengan nama properti) dapat digunakan, secara default. Namun, hanya satu sintaks properti yang diizinkan untuk ditentukan saat Anda menggunakan opsi : property_syntax .

Penyeleksi Multiline

Dalam sintaksis Indentasi, penyeleksi dapat ditempatkan di baris baru setiap kali muncul setelahnya commas.

Contoh

Contoh berikut menjelaskan penggunaan multiline selector di file SCSS -

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Selanjutnya, buat file style.scss . Perhatikan ekstensi .scss .

style.scss

.class1,
.class2{
   color:red;
}

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Selanjutnya, jalankan perintah yang diberikan di atas, itu akan membuat file style.css secara otomatis dengan kode berikut -

Style.css yang dihasilkan seperti yang ditunjukkan di bawah ini -

style.css

.class1,
.class2 {
   color: red;
}

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

  • Simpan kode html yang diberikan di atas dalam file multiline_selectors .html.

  • Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.

Komentar

Komentar menempati seluruh baris dan menyertakan semua teks yang berada di bawahnya. Mereka berbasis baris dalam sintaksis berlekuk. Untuk informasi lebih lanjut tentang komentar, lihat tautan ini .

@impor

Di SASS, file @importpetunjuk dapat ditulis dengan / tanpa tanda kutip. Tidak seperti di SCSS, mereka harus digunakan dengan tanda kutip.

Misalnya, di SCSS file @import direktif dapat digunakan sebagai -

@import "themes/blackforest";
@import "style.sass";

Ini dapat ditulis dalam SASS sebagai -

@import themes/blackforest
@import fontstyle.sass

Petunjuk Mixin

SASS mendukung singkatan untuk arahan seperti @mixin dan @include. Dari pada@mixin dan @include Kamu dapat memakai = dan + karakter, yang memerlukan lebih sedikit pengetikan dan membuat kode Anda lebih sederhana, dan lebih mudah dibaca.

Misalnya, Anda dapat menulis arahan mixin sebagai -

=myclass
   font-size: 12px;
p
   +myclass

Kode yang diberikan di atas sama dengan -

@mixin myclass
   font-size: 12px;
p
   @include myclass

Sintaks yang Tidak Berlaku Lagi

SASS mendukung penggunaan beberapa sintaks lama. Namun, menggunakan sintaks ini di SASS adalahnot recommended. Peringatan akan ditampilkan jika Anda menggunakan sintaks ini dan itu dihapus di versi yang lebih baru. Beberapa sintaks lama ditunjukkan pada tabel berikut.

No. S. Operator & Deskripsi
1

=

Itu digunakan sebagai ganti: saat mengatur variabel dan properti ke nilai SassScript.

2

||=

Itu digunakan sebagai ganti: setiap kali Anda menetapkan nilai default variabel.

3

!

Dari pada $, ! was used as variable prefix. Functionality will not be changed when it is used instead of $.

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 file 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 atas), 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 aplikasi web, yang memberikan kecepatan dan modularitas ke Rails. Untuk mengetahui lebih lanjut 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 background 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 untuk melacak penyeleksi impor dan mixin saat 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 akan menggunakan deklarasi @charset .

Dalam bab ini, kita akan mempelajari tentang CSS Extensions. Ekstensi CSS dapat digunakan untuk meningkatkan fungsionalitas halaman web. Tabel berikut mencantumkan beberapa ekstensi CSS yang digunakan di SASS -

No. S. Ekstensi & Deskripsi CSS
1 Aturan Bertingkat

Ini adalah cara menggabungkan beberapa aturan CSS dalam satu sama lain.

2 Mereferensikan Pemilih Induk: &

Ini adalah proses memilih pemilih induk dengan menggunakan & karakter.

3 Properti Bersarang

Ini memungkinkan penumpukan properti ke properti lain yang mengarah ke pengelompokan kode terkait lainnya.

4 Placeholder Selectors

Sass mendukung pemilih placeholder menggunakan pemilih kelas atau id dengan menggunakan direktif @extend .

Dalam bab ini, kita akan mempelajari tentang Sass Comments. Komentar adalah pernyataan yang tidak dapat dieksekusi, yang ditempatkan dalam kode sumber. Komentar membuat kode sumber lebih mudah dipahami. SASS mendukung dua jenis komentar.

  • Multiline comments- Ini ditulis menggunakan / * dan * /. Komentar multiline dipertahankan dalam keluaran CSS.

  • Single line comments - Ini ditulis menggunakan //diikuti dengan komentar. Komentar baris tunggal tidak disimpan dalam keluaran CSS.

Contoh

Contoh berikut menunjukkan penggunaan komentar di file SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

Selanjutnya, buat file style.scss .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Selanjutnya, jalankan perintah di atas, itu akan membuat file style.css secara otomatis dengan kode berikut -

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

  • Simpan kode html yang diberikan di atas di sass_comments.html mengajukan.

  • Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.

Untuk mempelajari tentang interpolasi dalam komentar multiline, klik tautan ini .

Sass - Interpolasi dalam Komentar Multiline

Deskripsi

Interpolasi dalam komentar multiline diselesaikan di CSS yang dihasilkan. Anda dapat menentukan variabel atau nama properti dalam tanda kurung kurawal.

Sintaksis

$var : "value"; /* multiline comments #{$var} */

Contoh

Contoh berikut menunjukkan penggunaan interpolasi dalam komentar multiline di file SCSS -

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

Selanjutnya, buat file style.scss .

style.css

$version: "7.8"; /* Framework version for the generated CSS is #{$version}. */

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Selanjutnya, jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut

style.css

/* Framework version for the generated CSS is 7.8. */

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

  • Simpan kode html yang diberikan di atas di sass_comments_interpolation.htm mengajukan.

  • Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.

SASS menggunakan sekumpulan kecil ekstensi yang dikenal sebagai SassScript yang dapat disertakan dalam dokumen SASS untuk menghitung variabel dari nilai properti dan menggunakan properti variabel, aritmatika, dan fungsi lainnya. SassScript juga dapat digunakan dengan pemilih dan nama properti saat menggunakan mixin (Mixins memungkinkan untuk menggunakan kembali gaya CSS di seluruh lembar gaya).

Tabel berikut mencantumkan beberapa ekstensi CSS yang digunakan di SASS -

No. S. Ekstensi & Deskripsi CSS
1 Shell Interaktif

Ini mengevaluasi ekspresi SassScript menggunakan baris perintah.

2 Variabel

Ini mewakili data seperti nilai numerik, karakter atau alamat memori.

3 Tipe Data

Ini mendeklarasikan tipe data untuk setiap objek data.

4 Operasi

Ini menyediakan operasi seperti operasi angka, warna, string, boolean, dan daftar.

5 Tanda kurung

Ini adalah sepasang tanda yang biasanya ditandai dengan tanda kurung bulat () atau tanda kurung siku [].

6 Fungsi

Ini mendukung penggunaan fungsi dengan memberikan beberapa argumen kata kunci.

7 Interpolasi

Ini menyediakan variabel SassScript dan nama properti menggunakan #{ } sintaksis.

8 & di SassScript

Ini memungkinkan penumpukan properti ke properti lain yang mengarah ke grup kode terkait lainnya.

9 Variabel Default

Ini memungkinkan penumpukan properti ke properti lain yang mengarah ke grup kode terkait lainnya.

Tabel berikut mencantumkan semua aturan dan arahan yang dapat Anda gunakan di SASS.

No. S. Petunjuk & Deskripsi
1 @impor

Ini mengimpor file SASS atau SCSS, itu langsung mengambil nama file untuk diimpor.

2 @media

Ini menetapkan aturan gaya untuk jenis media yang berbeda.

3 @memperpanjang

@extend direktif digunakan untuk berbagi aturan dan hubungan antara penyeleksi.

4 @ di-root

@ at-root directive adalah kumpulan aturan bersarang, yang mampu membuat blok gaya di root dokumen.

5 @debet

@debug direktif mendeteksi kesalahan dan menampilkan nilai ekspresi SassScript ke aliran keluaran kesalahan standar.

6 @memperingatkan

@warn directive digunakan untuk memberikan saran peringatan tentang masalah; ini menampilkan nilai ekspresi SassScript ke aliran keluaran kesalahan standar.

7 @kesalahan

@error direktif menampilkan nilai ekspresi SassScript sebagai kesalahan fatal.

Dalam bab ini, kita akan mempelajari tentang Control Directives & Expressions. Penggayaan berdasarkan beberapa kondisi atau menerapkan gaya yang sama berkali-kali dengan variasi dapat dilakukan dengan menggunakan arahan kontrol dan ekspresi, yang didukung oleh SassScript. Arahan kontrol ini adalah opsi lanjutan yang digunakan terutama di mixin. Mereka membutuhkan fleksibilitas yang cukup, karena mereka adalah bagian dari perpustakaan Kompas.

Tabel berikut mencantumkan arahan kontrol dan ekspresi yang digunakan dalam SASS -

No. S. Kontrol Arahan & Ekspresi dengan Deskripsi
1 jika()

Berdasarkan kondisi tersebut, fungsi if () hanya mengembalikan satu hasil dari dua kemungkinan hasil.

2 @jika

The @if direktif menerima ekspresi SassScript dan menggunakan gaya bersarang setiap kali hasil ekspresi adalah apa-apa selain palsu atau nol .

3 @untuk

The @for direktif memungkinkan Anda untuk menghasilkan gaya dalam satu lingkaran.

4 @setiap

Dalam direktif @each , variabel ditentukan yang berisi nilai setiap item dalam daftar.

5 @sementara

Dibutuhkan ekspresi SassScript dan sampai pernyataan tersebut mengevaluasi ke salah, itu secara berulang-ulang mengeluarkan gaya bersarang.

Mixin memungkinkan pembuatan sekelompok gaya, yang dapat digunakan kembali di seluruh stylesheet Anda tanpa perlu membuat ulang kelas non-semantik. Di CSS, mixin dapat menyimpan beberapa nilai atau parameter dan memanggil fungsi; ini membantu untuk menghindari penulisan kode berulang. Nama mixin dapat menggunakan garis bawah dan tanda hubung secara bergantian. Berikut adalah arahan yang ada di Mixins -

No. S. Petunjuk & Deskripsi
1 Mendefinisikan Mixin

@mixin direktif digunakan untuk mendefinisikan mixin.

2 Termasuk Mixin

@include direktif digunakan untuk memasukkan mixin ke dalam dokumen.

3 Argumen

Nilai SassScript dapat dianggap sebagai argumen dalam mixin, yang diberikan saat mixin disertakan dan tersedia sebagai variabel dalam mixin.

4 Meneruskan Blok Konten ke Mixin

Blok gaya diteruskan ke mixin.

Dalam bab ini, kita akan mempelajari tentang Function Directives. Di SASS, Anda dapat membuat fungsi Anda sendiri dan menggunakannya dalam konteks skrip Anda atau dapat digunakan dengan nilai apa pun. Fungsi dipanggil dengan menggunakan nama fungsi dan dengan parameter apa pun.

Contoh

Contoh berikut menunjukkan penggunaan fungsi direktif di file SCSS -

function_directive.htm

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

Selanjutnya, buat file style.scss .

style.scss

$first-width: 5px; $second-width: 5px;

@function adjust_width($n) { @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

sass --watch C:\ruby\lib\sass\style.scss:style.css

Selanjutnya, jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -

style.css

#set_width {
   padding-left: 95px; 
}

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

  • Simpan kode html yang diberikan di atas di function_directive.html mengajukan.

  • Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.

Dalam output, Anda dapat melihat bahwa padding kiri sedang diterapkan.

Sama seperti mixin, fungsi juga dapat mengakses variabel yang ditentukan secara global dan juga dapat menerima parameter. Anda harus memanggil nilai hasil untuk fungsi tersebut dengan menggunakan@return. Kita dapat memanggil fungsi yang ditentukan SASS dengan menggunakan parameter kata kunci.

Panggil fungsi di atas seperti yang ditunjukkan di bawah ini.

#set_width { padding-left: adjust_width($n: 10); }

Konvensi Penamaan

Untuk menghindari konflik penamaan, nama fungsi dapat diawali sehingga dapat dengan mudah dibedakan. Seperti mixin, argumen variabel juga didukung oleh fungsi yang ditentukan pengguna. Fungsi dan pengenal SASS lainnya dapat menggunakan garis bawah (_) dan tanda hubung (-) secara bergantian.

Misalnya, jika suatu fungsi didefinisikan sebagai adjust_width, itu bisa digunakan sebagai adjust-width, dan sebaliknya.

Dalam bab ini, kita akan mempelajari tentang SASS Output Style. File CSS yang dihasilkan SASS terdiri dari gaya CSS default, yang mencerminkan struktur dokumen. Gaya CSS default bagus tetapi mungkin tidak cocok untuk semua situasi; di sisi lain, SASS mendukung banyak gaya lainnya.

Ini mendukung gaya keluaran yang berbeda berikut -

: bersarang

Gaya bertingkat adalah gaya default SASS. Cara penataan gaya ini sangat berguna saat Anda berurusan dengan file CSS yang besar. Itu membuat struktur file lebih mudah dibaca dan dipahami dengan mudah. Setiap properti mengambil barisnya sendiri dan indentasi setiap aturan didasarkan pada seberapa dalam ia disarangkan.

Misalnya, kita dapat menumpuk kode dalam file SASS seperti yang ditunjukkan di bawah ini -

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

: diperluas

Dalam jenis gaya CSS yang diperluas, setiap properti dan aturan memiliki barisnya sendiri. Dibutuhkan lebih banyak ruang dibandingkan dengan gaya CSS Bersarang. Bagian Aturan terdiri dari properti, yang semuanya dimaksudkan dalam aturan, sedangkan aturan tidak mengikuti indentasi apa pun.

Misalnya, kami dapat memperluas kode di file SASS seperti yang ditunjukkan di bawah ini -

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

: kompak

Gaya CSS ringkas secara kompetitif membutuhkan lebih sedikit ruang daripada Diperluas dan Bersarang. Ini berfokus terutama pada penyeleksi daripada propertinya. Setiap selektor mengambil satu baris dan propertinya juga ditempatkan di baris yang sama. Aturan bertingkat diposisikan bersebelahan tanpa baris baru dan grup aturan terpisah akan memiliki baris baru di antara mereka.

Misalnya, kita dapat memadatkan kode dalam file SASS seperti yang ditunjukkan di bawah ini -

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

: dikompresi

Gaya CSS terkompresi membutuhkan paling sedikit ruang dibandingkan dengan semua gaya lain yang dibahas di atas. Ini memberikan spasi putih hanya untuk memisahkan pemilih dan baris baru di akhir file. Cara penataan gaya ini membingungkan dan tidak mudah dibaca.

Misalnya, kami dapat mengompres kode dalam file SASS seperti yang ditunjukkan di bawah ini -

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}

Anda dapat memperluas fungsionalitas SASS untuk menyediakan berbagai jenis fitur dan penyesuaian bagi pengguna. Untuk menggunakan fitur-fitur ini, pengguna harus memiliki pengetahuan tentang Ruby.

Mendefinisikan Fungsi SASS Kustom

Anda dapat menentukan fungsi SASS Anda sendiri saat menggunakan Ruby API. Anda dapat menambahkan fungsi kustom Anda dengan menambahkannya ke metode Ruby seperti yang ditunjukkan pada kode berikut -

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

Dalam kode yang Anda lihat, Fungsi, mendeklarasikan, menentukan nama argumen untuk fungsi tersebut. Jika gagal maka tidak akan menerima argumen apapun bahkan jika fungsi tersebut bekerja dan juga mengambil argumen kata kunci yang sewenang-wenang. Anda bisa mendapatkan nilai Ruby dengan menggunakan value accessor dan mengakses objek warna dengan menggunakan rgb, merah, hijau , atau biru .

Toko Cache

SASS menyimpan cache dari dokumen yang diurai, yang dapat digunakan kembali tanpa perlu melakukan parsing lagi. SASS menggunakan:cache_locationuntuk menulis file cache pada sistem file. Itu membuat kompilasi file SASS lebih cepat dan jika Anda menghapus file yang di-cache, mereka akan dibuat lagi saat Anda mengkompilasi lain kali. Anda dapat menentukan penyimpanan cache Anda sendiri dengan mengatur:cache_storepilihan. Ini akan menulis file cache pada sistem file atau membagikan file cache ke proses atau mesin ruby. SASS menggunakan turunan dari subclass Sass :: CacheStores :: Base untuk menyimpan dan mengambil hasil cache.

Importir Kustom

SASS menggunakan @import untuk mengimpor file SCSS dan SASS dan meneruskan jalur ke aturan @import untuk menemukan kode jalur yang sesuai untuk jalur yang ditentukan. Importir SASS menggunakan sistem file untuk memuat kode dan ditambahkan ke beban menggunakan database atau skema penamaan file yang berbeda.

Importir tunggal dapat mengambil pemuatan file tunggal dan dapat ditempatkan di array : load_paths bersama dengan jalur sistem file. Saat menggunakan @import , SASS mencari jalur yang dimuat, yang mengimpor jalur untuk importir. Ketika jalur ditemukan, file yang diimpor digunakan. Seorang pengguna dapat mewarisi importir dariSass::Importers::Base.