Apa perbedaan antara SCSS dan Sass?


1904

Dari apa yang saya baca, Sass adalah bahasa yang membuat CSS lebih kuat dengan dukungan variabel dan matematika.

Apa bedanya dengan SCSS? Apakah seharusnya bahasa yang sama? Serupa? Berbeda?

Jawaban:


1867

Sass adalah pra-prosesor CSS dengan kemajuan sintaksis. Lembar gaya dalam sintaksis lanjutan diproses oleh program, dan diubah menjadi lembar gaya CSS biasa. Namun, mereka tidak memperluas standar CSS itu sendiri.

Variabel CSS didukung dan dapat dimanfaatkan tetapi tidak serta variabel pra-prosesor.

Untuk perbedaan antara SCSS dan Sass, teks ini pada halaman dokumentasi Sass harus menjawab pertanyaan:

Ada dua sintaks yang tersedia untuk Sass. Yang pertama, dikenal sebagai SCSS (Sassy CSS) dan digunakan di seluruh referensi ini, adalah perpanjangan dari sintaks CSS. Ini berarti bahwa setiap lembar gaya CSS yang valid adalah file SCSS yang valid dengan arti yang sama. Sintaks ini ditingkatkan dengan fitur Sass yang dijelaskan di bawah ini. File yang menggunakan sintaks ini memiliki ekstensi .scss .

Sintaks kedua dan yang lebih tua , yang dikenal sebagai sintaks indentasi (atau kadang-kadang hanya "Sass"), menyediakan cara yang lebih singkat untuk menulis CSS. Ini menggunakan lekukan daripada tanda kurung untuk menunjukkan bersarang penyeleksi, dan baris baru daripada titik koma untuk memisahkan properti. File yang menggunakan sintaks ini memiliki ekstensi .sass .

Namun, semua ini hanya berfungsi dengan pre-compiler Sass yang pada akhirnya menciptakan CSS. Ini bukan ekstensi ke standar CSS itu sendiri.


229
Ketika memilih sintaks, perlu diingat bahwa hanya scss yang memungkinkan menyalin dan menempelkan css dari stackoverflow dan alat pengembangan browser, sedangkan di sass Anda selalu harus menyesuaikan sintaks
fishbone


Gotcha lain: pada 2019-05-10, SASS masih tidak mendukung ekspresi multi-baris, sehingga daftar / peta yang besar harus berupa satu-liner, didefinisikan menggunakan banyak pemanggilan fungsi, atau didefinisikan dalam file SCSS. Tampaknya masih merupakan fitur yang direncanakan, tetapi saya tidak yakin apakah sebenarnya ada gerakan pada implementasi atau belum.
Joseph Sikorski

12
@ 0x1ad2 Pilihan antara scssdan sasslebih dari sekedar preferensi pribadi hari ini. scssjauh lebih umum - yang digunakan dalam kebanyakan kerangka CSS populer seperti Bootstrap, Foundation, Materializedll kerangka UI utama mendukung scsslebih sasssecara default - sudut, Bereaksi, Vue. Setiap tutorial atau demo umumnya akan menggunakan scssmisalnya create-react-app facebook.github.io/create-react-app/docs/…
Drenai

@fishbone tidak sepenuhnya benar, jika Anda menggunakan editor kode yang layak, ia dapat menangani gaya yang disalin dari browser dan menulis ulang dirinya sendiri untuk indentasi
Miro Krsjak

617

Saya salah satu pengembang yang membantu menciptakan Sass.

Perbedaannya adalah UI. Di bawah eksterior tekstual mereka identik. Inilah sebabnya mengapa file sass dan scss dapat saling mengimpor. Sebenarnya, Sass memiliki empat parser sintaksis: scss, sass, CSS, dan kurang. Semua ini mengonversi sintaks yang berbeda menjadi Pohon Sintaks Abstrak yang diproses lebih lanjut menjadi output CSS atau bahkan ke salah satu format lain melalui alat sass-convert.

Gunakan sintaks yang paling Anda sukai, keduanya didukung penuh dan Anda dapat mengubahnya di antara mereka nanti jika Anda berubah pikiran.


55
Permisi? Apakah saya membacanya dengan benar? Bisakah Sass benar-benar mengimpor Lebih Sedikit file dengan benar? Apakah ada sinergi antara mixin / variabel?
pilau

8
Kesamaan dengan CSS standar mungkin lebih penting dalam lingkungan grup di mana ada orang yang perlu membaca kode Anda, tetapi hanya sesekali, dan mereka tidak punya waktu / minat untuk mempelajari sintaksis yang sama sekali baru.
c roald

5
Apakah "UI" berarti "bahasa"?
Djechlin

@djechlin - ya, interpretasi saya tentang "UI" di sini akan menjadi sintaksis yang menghadap programmer dari file. Misalnya titik koma atau tidak, dll.
orion elenzil

10
Haruskah "UI" dalam jawaban diganti dengan istilah yang lebih umum dipahami, seperti yang disarankan @orionelenzil?
Michael Freidgeim

383

File Sass .sasssecara visual berbeda dari .scssfile, mis

Example.sass - sass adalah sintaks yang lebih lama

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - sassy css adalah sintaks baru pada Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Setiap dokumen CSS yang valid dapat dikonversi ke Sassy CSS (SCSS) hanya dengan mengubah ekstensi dari .cssmenjadi .scss.


@Novocaine +1, saya setuju. Sebagai seorang programmer C ++, saya lebih suka tanda kurung dan titik koma. BTW, Saya punya pertanyaan, apakah konversi dari .scsske .csssama .csske .scss?
JW.ZG

1
Ini lebih dari apa yang saya pedulikan dibandingkan dengan jawaban di atas ... Terlalu malas untuk membaca ;-)
LYu

9
@ JW.ZG, Ini bukan konversi, asli .csshanya valid .scss. Segera setelah Anda menambahkan kode spesifik scss, mengubah kembali nama file akan berakhir sebagai file css yang tidak valid. cssadalah persegi, dan scssadalah persegi panjang. Semua kotak adalah persegi panjang, tetapi tidak semua persegi panjang adalah kotak.
Berikan

145

Sass ( StyleSheets Awesome Sintaksis ) memiliki dua sintaks:

  • yang lebih baru: SCSS ( Sassy CSS )
  • dan sintaks indent yang lebih tua, asli: yang merupakan Sass asli dan juga disebut Sass .

Jadi keduanya adalah bagian dari preprosesor Sass dengan dua kemungkinan sintaks yang berbeda.

Perbedaan paling penting antara SCSS dan Sass asli :

SCSS :

  • Sintaksnya mirip dengan CSS (sedemikian rupa sehingga setiap CSS3 valid yang teratur juga valid SCSS , tetapi hubungan ke arah lain jelas tidak terjadi)

  • Menggunakan kawat gigi {}

  • Gunakan semi-titik dua ;
  • Tanda penugasan adalah :
  • Untuk membuat mixin itu menggunakan @mixinarahan
  • Untuk menggunakan mixin, ia mendahului itu dengan @includearahan
  • File memiliki ekstensi .scss .

Sass Asli :

  • Sintaksnya mirip dengan Ruby
  • Tidak ada kawat gigi
  • Tidak ada lekukan yang ketat
  • Tidak ada titik koma
  • Tanda penugasan =alih-alih:
  • Untuk membuat mixin itu menggunakan =tanda
  • Untuk menggunakan mixin, ia mendahului itu dengan +tanda
  • File memiliki ekstensi .sass .

Beberapa lebih suka Sass , sintaksis aslinya - sementara yang lain lebih suka SCSS . Either way, tetapi perlu dicatat bahwa sintaks indentasi Sass belum dan tidak akan pernah ditinggalkan .

Konversi dengan sass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Dokumentasi Sass dan SCSS


14
Aneh bahwa jawaban yang jelas dan singkat seperti itu memiliki suara yang kurang dari yang lain. Saya telah melalui tumpukan sumber untuk memahami apa perbedaan antara Sass dan Scss dan akhirnya menemukan ini yang langsung mencerahkan saya. Pekerjaan bagus kecuali beberapa kesalahan pengejaan / tata bahasa.
tnkh

3
@ TonyNg terima kasih. Aku senang bisa membantumu. Mengenai poin, itu sangat pasti karena saya menjawab sangat terlambat - sekitar 6 tahun setelah mengajukan pertanyaan. Jangan ragu untuk mengoreksi saya, tempat saya membuat kesalahan ejaan atau tata bahasa.
simhumileco

3
Tambahkan contoh sederhana untuk menunjukkan sintaks yang berbeda dan jawaban ini akan sempurna.
hogan

3
Jawaban bersih, mengesankan
Hidayt Rahman

3
Jawaban yang bagus adalah ini!
Mohammad Afrashteh

80

Sintaksnya berbeda, dan itulah pro utama (atau kontra, tergantung pada perspektif Anda).

Saya akan mencoba untuk tidak mengulangi banyak dari apa yang dikatakan orang lain, Anda dapat dengan mudah google itu tetapi sebaliknya, saya ingin mengatakan beberapa hal dari pengalaman saya menggunakan keduanya, kadang-kadang bahkan dalam proyek yang sama.

SASS pro

  • bersih - jika Anda berasal dari Python, Ruby (Anda bahkan dapat menulis props dengan sintaks seperti simbol) atau bahkan dunia CoffeeScript, itu akan menjadi sangat alami bagi Anda - menulis mixin, fungsi, dan umumnya semua hal yang dapat digunakan kembali .sassjauh lebih mudah 'dan dapat dibaca daripada di .scss(subjektif).

Kontra SASS

  • whitespace sensitif (subyektif), saya tidak keberatan dalam bahasa lain tetapi di sini di CSS itu hanya mengganggu saya (masalah: menyalin, perang tab vs ruang, dll).
  • tidak ada aturan sebaris (ini adalah game yang melanggar bagi saya), Anda tidak bisa melakukan body color: redseperti yang Anda bisa di .scssbody {color: red}
  • mengimpor barang vendor lainnya, menyalin cuplikan vanilla CSS - bukan tidak mungkin tetapi sangat membosankan setelah beberapa waktu. Solusinya adalah memiliki .scssfile (bersama dengan .sassfile) di proyek Anda atau mengubahnya menjadi .sass.

Selain ini - mereka melakukan pekerjaan yang sama.

Sekarang, apa yang saya suka lakukan adalah menulis mixin dan variabel dalam .sassdan kode yang benar-benar akan dikompilasi ke dalam CSS .scssjika memungkinkan (yaitu Visual studio tidak memiliki dukungan untuk .sasstetapi ketika saya bekerja pada proyek Rails saya biasanya menggabungkan dua dari mereka, tidak dalam satu file ofc).

Akhir-akhir ini, saya mempertimbangkan untuk memberi Stylus kesempatan (untuk preprocessor CSS penuh waktu) karena memungkinkan Anda untuk menggabungkan dua sintaksis dalam satu file (di antara beberapa fitur lainnya). Itu mungkin bukan arah yang baik untuk diambil tim tetapi ketika Anda mempertahankannya sendiri - tidak apa-apa. Stylus sebenarnya paling fleksibel ketika sintaksisnya dipertanyakan.

Dan akhirnya mixin untuk .scssvs .sassperbandingan sintaks:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

4
@cimmanon Ini fitur pro dan kontra, dijabarkan dengan jelas. Itulah perbedaan antara ini dan jawaban lainnya. Saya memilih untuk keluar dari merah. Saya pikir itu berguna walaupun memiliki diagram venn biasa dari jawaban yang tumpang tindih yang dimiliki oleh setiap pos SO lainnya. Ini bisa lebih bermanfaat bagi seseorang hanya membuat pilihan di dua jalur. Saya juga berpikir itu sedikit lebih baik daripada jawaban yang diterima karena itu sebenarnya menunjukkan perbedaan bahasa daripada hanya mengatakan "Sass berbeda karena itu bukan SCSS", yang bagi saya tidak berguna. Saya bisa melakukannya tanpa barang-barang penggunaan pribadi, tetapi masih :)
coblr

61

Dari beranda bahasa

Sass memiliki dua sintaksis. Sintaks utama baru (pada Sass 3) dikenal sebagai "SCSS" (untuk "Sassy CSS") , dan merupakan superset dari sintaks CSS3. Ini berarti bahwa setiap stylesheet CSS3 yang valid juga SCSS yang valid. File SCSS menggunakan ekstensi .scss.

Sintaks kedua, yang lebih tua dikenal sebagai sintaks indentasi (atau hanya "Sass"). Terinspirasi oleh kesederhanaan Haml, ini dimaksudkan untuk orang yang lebih suka keringkasan daripada kesamaan dengan CSS. Alih-alih tanda kurung dan titik koma, ia menggunakan lekukan garis untuk menentukan blok. Meskipun bukan lagi sintaksis utama, sintaks yang terindentasi akan terus didukung. File dalam sintaks indentasi menggunakan ekstensi .sass.

SASS adalah bahasa yang ditafsirkan yang mengeluarkan CSS. Struktur Sass terlihat seperti CSS (jarak jauh), tetapi menurut saya deskripsi itu agak menyesatkan; itu bukan pengganti CSS, atau ekstensi. Ini adalah interpreter yang memuntahkan CSS pada akhirnya, jadi Sass masih memiliki keterbatasan CSS normal, tetapi menutupi mereka dengan kode sederhana.


22

Perbedaan dasarnya adalah sintaksisnya. Sementara SASS memiliki sintaks yang longgar dengan spasi putih dan tanpa titik koma, SCSS lebih menyerupai CSS.


21

SASS adalah singkatan dari StyleSheets yang Luar Biasa Secara Sintaksis. Ini adalah perpanjangan dari CSS yang menambah kekuatan dan keanggunan ke bahasa dasar. SASS baru bernama SCSS dengan beberapa pengejaran, tetapi yang lama SASS juga ada. Sebelum Anda menggunakan SCSS atau SASS, silakan lihat perbedaan di bawah ini.

masukkan deskripsi gambar di sini

Contoh beberapa sintaks SCSS dan SASS:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

KELANCANGAN

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Output CSS setelah Kompilasi (Sama untuk Keduanya)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Untuk panduan lebih lanjut, Anda dapat melihat situs web resmi .


16

Sass adalah yang pertama, dan sintaksinya agak berbeda. Misalnya, termasuk mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass mengabaikan tanda kurung keriting dan titik koma dan berbaring di atas sarang, yang menurut saya lebih bermanfaat.


13

Perbedaan antara artikel SASS dan SCSS menjelaskan perbedaan dalam detail. Jangan bingung dengan opsi SASS dan SCSS, meskipun saya juga awalnya, .scss adalah Sassy CSS dan merupakan generasi berikutnya dari .sass.

Jika itu tidak masuk akal, Anda dapat melihat perbedaan dalam kode di bawah ini.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

Dalam kode di atas kita gunakan; untuk memisahkan deklarasi. Saya bahkan telah menambahkan semua deklarasi untuk .border ke satu baris untuk menggambarkan hal ini lebih lanjut. Sebaliknya, kode SASS di bawah ini harus pada baris yang berbeda dengan indentasi dan tidak ada penggunaan;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Anda dapat melihat dari CSS di bawah ini bahwa gaya SCSS jauh lebih mirip dengan CSS biasa daripada pendekatan SASS yang lebih lama.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Saya pikir sebagian besar waktu akhir-akhir ini jika seseorang menyebutkan bahwa mereka bekerja dengan Sass mereka merujuk pada penulisan dalam .scss daripada cara tradisional .sass.


12

Asli sassadalah sintaks mirip ruby, mirip dengan ruby, jade dll ...

Dalam sintaksis tersebut, kami tidak menggunakan {}, sebaliknya kami menggunakan spasi putih, juga tidak menggunakan ;...

Dalam scsssintaksis lebih seperti CSS, tetapi dengan mendapatkan lebih banyak opsi seperti: bersarang, mendeklarasikan, dll, mirip dengan lessdan pra-pemrosesan lainnya CSS...

Mereka pada dasarnya melakukan hal yang sama, tapi aku meletakkan beberapa baris masing-masing untuk melihat perbedaan sintaks, lihat {}, ;dan spaces:

KELANCANGAN:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

6

Jawaban ringkas:

SCSS mengacu pada sintaks utama yang didukung oleh pra-prosesor Sass CSS .

  • File yang diakhiri dengan .scssmewakili sintaks standar yang didukung oleh Sass. SCSS adalah superset dari CSS.
  • File yang diakhiri dengan .sassmewakili sintaks "lama" yang didukung oleh Sass yang berasal dari dunia Ruby.

4

SASS adalah Style Style Sintaks yang Menakjubkan dan merupakan perpanjangan dari CSS yang menyediakan fitur aturan bertingkat, pewarisan, Mixins sedangkan SCSS adalah Sassy Cascaded Style Sheets yang mirip dengan CSS dan mengisi celah dan ketidaksesuaian antara CSS dan SASS. Itu dilisensikan di bawah lisensi MIT. Artikel ini memiliki lebih banyak tentang perbedaan: https://www.educba.com/sass-vs-scss/

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.