Apa perbezaan antara SASS dan SCSS?

Sass dan SCSS: Preprocessor mana yang hendak dipilih?

mata teras

SASS dan SCSS adalah bahasa skrip preprocessor yang disusun menjadi CSS, tetapi mempunyai sintaks yang berbeza. SASS menggunakan sintaks indentasi, manakala SCSS menggunakan sintaks seperti CSS. Ini bermakna bahawa SASS tidak memerlukan titik -titik batu atau tanda kurung, manakala SCSS menggunakan kurungan untuk mewakili blok kod dan memisahkan garis dalam blok dengan titik -koma.
Pilihan SASS dan SCSS bergantung kepada keutamaan peribadi dan keperluan projek. Walau bagaimanapun, kerana SCSS mempunyai sintaks yang sama, SCSS mungkin lebih mudah dimulakan untuk pemula atau mereka yang sudah biasa dengan CSS. Ia juga lebih serasi dengan alat, plugin, dan demo yang sedia ada, yang menjadikannya pilihan yang lebih mudah untuk banyak pemaju.
SASS dan SCSS kedua -duanya menyediakan ciri -ciri canggih yang tidak terdapat dalam CSS biasa, seperti pembolehubah, bersarang, mixin dan warisan, yang dapat meningkatkan kebolehbacaan CSS, pemeliharaan, dan kecekapan penulisan. Walau bagaimanapun, dengan menggunakan kedua -dua memerlukan langkah -langkah penyusunan, yang boleh meningkatkan kerumitan proses membina.

Artikel ini adalah versi yang dikemas kini dari artikel yang dikeluarkan pada 28 April 2014

Saya telah menulis banyak tentang Sass, tetapi beberapa komen yang saya terima dengan jelas menunjukkan bahawa tidak semua orang tahu dengan tepat apa yang dirujuk Sass. Berikut adalah beberapa penjelasan: Apabila kita bercakap tentang sass kita biasanya merujuk kepada preprocessors dan keseluruhan bahasa. Sebagai contoh, kami akan mengatakan "kami menggunakan sass" atau "ini adalah sass mixin." Sementara itu, SASS (preprocessor) membolehkan dua sintaks yang berbeza:

sass, juga dikenali sebagai sintaks indentasi

• SCSS, sintaks yang serupa dengan CSS
Sejarah Sass
Pada mulanya, Sass adalah sebahagian daripada preprocessor lain yang dipanggil Haml, yang direka dan ditulis oleh pemaju Ruby. Oleh itu, Sass Stylesheet menggunakan sintaks seperti ruby, tanpa pendakap, titik koma, dan lekukan ketat seperti berikut:

Seperti yang anda lihat, ini adalah perbezaan yang besar berbanding dengan CSS biasa! Walaupun anda seorang pengguna SASS, anda dapat melihat bahawa ini berbeza dari apa yang kita gunakan. Simbol pembolehubah adalah! Sangat pelik. Tetapi itulah yang kelihatan seperti Sass sebelum pelepasan versi 3.0 pada bulan Mei 2010, yang memperkenalkan sintaks baru yang dipanggil SCSS untuk

Sassy CSS

. Sintaks ini bertujuan untuk mempersempit jurang antara SASS dan CSS dengan memperkenalkan sintaks CSS yang mesra pengguna.

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

SCSS lebih dekat dengan CSS daripada SASS. Iaitu, penyelenggara SASS juga berusaha untuk menjadikan kedua -dua sintaks lebih dekat dengan satu sama lain dengan bergerak! Sekarang, apabila memulakan projek baru, anda mungkin ingin mengetahui sintaks mana yang harus anda gunakan. Biarkan saya memberi penjelasan di jalan dan menerangkan kebaikan dan keburukan setiap sintaks.

Kelebihan sintaks indentasi SASS

Walaupun sintaks ini mungkin kelihatan pelik, ia mempunyai beberapa perkara yang menarik. Pertama, ia lebih pendek dan lebih mudah untuk masuk. Tidak ada lagi pendakap dan titik koma yang diperlukan, anda tidak memerlukan semua perkara ini. Lebih baik! @mixin atau @include tidak diperlukan, apabila satu watak cukup: = dan. Di samping itu, sintaks SASS menguatkuasakan piawaian pengekodan bersih dengan bergantung pada lekukan. Oleh kerana lekukan yang salah mungkin merosakkan seluruh lembaran gaya .sass, ia memastikan bahawa kod itu sentiasa bersih dan terbentuk dengan baik. Hanya ada satu cara untuk menulis kod sass: cara yang baik. Tetapi berhati -hati! Indentasi dalam sass bermaksud sesuatu . Apabila memikat pemilih, ini bermakna ia bersarang dalam pemilih sebelumnya. Contohnya:

... CSS berikut akan output:

<code>// 变量
!primary-color= hotpink

// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius

.my-element
color= !primary-color
width= 100%
overflow= hidden

.my-other-element
+border-radius(5px)</code>

fakta mudah yang menolak .element-b satu tahap ke kanan bermakna bahawa ia adalah anak .element-A, dengan itu mengubah CSS yang dihasilkan. Sila

<code>// 变量
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}

.my-other-element {
@include border-radius(5px);
}</code>

berhati -hati

lekukan anda! Dengan cara ini, saya merasakan bahawa sintaks berasaskan indentasi mungkin lebih sesuai untuk pasukan Ruby/Python daripada pasukan PHP/Java (walaupun ini boleh dikatakan, saya suka mendengar sebaliknya). kelebihan sintaks SCSS

Bagi pemula, ia mematuhi sepenuhnya CSS. Ini bermakna anda boleh menamakan semula fail CSS ke .scss dan ia akan berfungsi dengan betul. Membuat SCSS penuh CSS yang serasi telah menjadi keutamaan bagi penyelenggara SASS sejak pembebasannya, dan pada pendapat saya, ini adalah masalah besar. Selain itu, mereka cuba berpegang pada sintaks yang mungkin menjadi sintaks CSS yang sah pada masa akan datang (dan oleh itu @ Arahan). Kerana SCSS bersesuaian dengan CSS, ini bermakna hampir tiada lengkung pembelajaran. Sintaks sudah diketahui: Lagipun, ia hanya CSS dengan sedikit kandungan tambahan. Ini penting apabila bekerja dengan pemaju yang tidak berpengalaman: mereka akan dapat dengan cepat memulakan pengekodan tanpa mengetahui apa -apa tentang SASS. Juga, lebih mudah dibaca kerana ia benar -benar masuk akal. Apabila anda membaca @Mixin, anda tahu ia adalah perisytiharan Mixin; Ia tidak menggunakan sebarang jalan pintas, dan segala -galanya masuk akal apabila dibaca dengan kuat. Di samping itu, kebanyakan alat SASS, plugin, dan demo yang sedia ada dibangunkan menggunakan sintaks SCSS. Dari masa ke masa, sintaks ini menjadi semakin penting dan menjadi pilihan lalai, terutamanya atas sebab -sebab di atas.

Pemikiran Akhir

Pilihan terpulang kepada anda, tetapi melainkan jika anda mempunyai alasan yang baik untuk mengekod menggunakan sintaks indentasi, saya sangat mengesyorkan menggunakan SCSS dan bukannya SASS. Ia bukan sahaja lebih mudah, tetapi juga lebih mudah. Saya telah mencuba sintaks indentasi sendiri dan menyukainya. Saya suka betapa pendek dan mudahnya. Sebelum saya berubah fikiran pada saat terakhir, saya sebenarnya merancang untuk memindahkan seluruh codebase ke sass di tempat kerja. Saya bersyukur kerana diri saya yang lalu yang menghalang langkah ini kerana sangat sukar untuk bekerja dengan beberapa alat kami jika kami menggunakan sintaks indentasi. Juga, nota sass tidak pernah menggunakan huruf besar, sama ada anda bercakap mengenai bahasa atau tatabahasa. Sementara itu, SCSS sentiasa menggunakan huruf besar. Perlukan peringatan? Sassnotsass.com boleh membantu anda!

Soalan Lazim Mengenai SASS dan SCSS

Apakah perbezaan utama antara SASS dan SCSS?

SASS (Sinonim Stylesheets) dan SCSS (Sassy CSS) adalah bahasa skrip preprocessor yang ditafsirkan sebagai cascading stylesheets (CSS). Perbezaan utama antara keduanya adalah sintaks mereka. SASS mengikuti sintaks berasaskan indentasi, yang bermaksud ia tidak memerlukan titik-warta atau tanda kurung. SCSS, sebaliknya, mengikuti sintaks yang serupa dengan CSS, menggunakan kurungan untuk mewakili blok kod dan memisahkan garisan dalam blok dengan titik -koma.

Bolehkah saya menukar sass ke scss dan sebaliknya?

Ya, anda boleh menukar SASS ke SCSS dan sebaliknya. Terdapat beberapa alat dalam talian yang boleh membantu anda menukar kod anda dari satu sintaks ke yang lain. Walau bagaimanapun, perlu diperhatikan bahawa semasa proses penukaran, beberapa fungsi tidak boleh ditukar secara langsung disebabkan oleh perbezaan sintaks.

Adakah lebih mudah untuk belajar SASS atau SCSS?

Ia sangat bergantung pada bagaimana anda biasa dengan CSS. Jika anda sudah biasa dengan CSS, anda mungkin mendapati SCS lebih mudah untuk belajar kerana sintaksnya sangat serupa. Walau bagaimanapun, jika anda tidak biasa dengan CSS, anda mungkin mendapati sintaks berasaskan indentasi SASS lebih mudah dan lebih intuitif.

Bolehkah saya menggunakan SASS dan SCSS dalam projek yang sama?

Secara teknikal, anda boleh menggunakan SASS dan SCSS dalam projek yang sama. Walau bagaimanapun, ia sering disyorkan untuk melekat pada sintaks untuk memastikan konsistensi dan kebolehbacaan. Sintaks campuran boleh menyebabkan kekeliruan dan menjadikan kod anda lebih sukar untuk dikekalkan.

Apakah kelebihan menggunakan SASS atau SCSS melalui CSS biasa?

SASS dan SCSS kedua -duanya menyediakan ciri -ciri yang tidak terdapat dalam CSS biasa, seperti pembolehubah, bersarang, mixin, warisan, dll. Ciri -ciri ini boleh menjadikan stylesheet anda lebih mudah dibaca dan diselenggara, dan juga menjimatkan masa dan usaha anda menulis CSS.

Adakah SCSS sama seperti CSS?

Walaupun SCSS adalah serupa dengan CSS dari segi sintaks, mereka tidak sama. SCSS adalah bahasa preprocessor yang menambah ciri -ciri yang kuat kepada CSS seperti pembolehubah, bersarang, mixin, dan warisan. Ciri -ciri ini tidak tersedia dalam CSS biasa.

Adakah saya memerlukan alat khas untuk menyusun SASS atau SCSS?

Ya, anda memerlukan pengkompil untuk menukar SASS atau SCSS ke CSS. Untuk tujuan ini, terdapat banyak alat yang tersedia, seperti node-sass, dart-sass, dan ruby-sass. Alat ini boleh diintegrasikan ke dalam proses membina anda untuk menyusun fail SASS atau SCSS secara automatik ke CSS.

Bolehkah saya menggunakan SASS atau SCSS dengan rangka kerja CSS?

Ya, anda boleh menggunakan SASS atau SCSS dengan rangka kerja CSS. Ramai kerangka CSS yang popular, seperti bootstrap dan asas, bahkan menawarkan versi SASS atau SCSS dari stylesheet mereka untuk penyesuaian yang lebih mudah.

Adakah terdapat kelemahan menggunakan SASS atau SCSS?

Kelemahan berpotensi menggunakan SASS atau SCSS adalah keperluan untuk langkah -langkah penyusunan. Ini mungkin menambah kerumitan kepada proses membina dan mungkin memerlukan alat dan persediaan tambahan. Walau bagaimanapun, manfaat menggunakan SASS atau SCS, seperti meningkatkan kebolehbacaan dan kebolehkerjaan, sering melebihi kelemahan ini.

Adakah sass atau scss lebih popular?

SASS dan SCSS kedua -duanya digunakan secara meluas, tetapi SCSS nampaknya lebih popular, mungkin kerana ia sama dengan CSS. Walau bagaimanapun, pilihan antara SASS dan SCS biasanya bergantung kepada keutamaan peribadi dan keperluan khusus projek.

Atas ialah kandungan terperinci Apa perbezaan antara SASS dan SCSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!