Sass - Gaya Keluaran

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 menyediakan spasi 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 
}