Apa perbedaan antara SCSS dan Sass?

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?

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.

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.

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.

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

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

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.

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

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.

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 .

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.

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.

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;
}

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.

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/