Pertanyaan 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?


1332
2018-04-13 19:23


asal


Jawaban:


Sass adalah pra-prosesor CSS dengan kemajuan sintaks. Style sheet dalam sintaks yang canggih diproses oleh program, dan diubah menjadi style sheet CSS biasa. Namun, mereka melakukannya tidak memperpanjang standar CSS itu sendiri.

Alasan utama untuk ini adalah penambahan fitur yang kurang menyakitkan CSS (seperti variabel).

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, merupakan perpanjangan dari sintaks CSS. Ini berarti bahwa setiap stylesheet CSS yang valid adalah file SCSS yang valid dengan arti yang sama. Sintaks ini ditingkatkan dengan fitur Sass yang dijelaskan di bawah ini. File menggunakan sintaks ini memiliki file .scss perpanjangan.

Yang kedua dan sintaks yang lebih tua, dikenal sebagai sintaks indentasi (atau terkadang hanya “Sass”), menyediakan cara penulisan CSS yang lebih ringkas. Ini menggunakan indentasi daripada tanda kurung untuk menunjukkan bersarangnya pemilih, dan baris baru daripada titik koma untuk properti terpisah. File menggunakan sintaks ini memiliki file .kelancangan perpanjangan.

Namun, semua ini hanya bekerja dengan pra-compiler Sass yang pada akhirnya menciptakan CSS. Ini bukan perpanjangan untuk standar CSS itu sendiri.


1358
2018-04-13 19:25



Saya adalah salah satu pengembang yang membantu menciptakan Sass.

Perbedaannya adalah UI. Di bawah eksterior tekstual mereka identik. Inilah sebabnya mengapa file sass dan scss dapat mengimpor satu sama lain. Sebenarnya, Sass memiliki empat parser sintaks: scss, sass, CSS, dan kurang. Semua ini mengubah sintaks yang berbeda menjadi Abstract Syntax Tree yang selanjutnya diproses menjadi output CSS atau bahkan ke salah satu format lain melalui alat sass-convert.

Gunakan sintaks yang Anda sukai, keduanya didukung sepenuhnya dan Anda dapat mengubahnya di lain waktu jika Anda berubah pikiran.


480
2018-04-20 15:16



The Sass .sass file secara visual berbeda dari .scss file, mis.

example.sass

$color: red

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

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

example.scss

$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 .css untuk .scss.


264
2017-11-30 03:05



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

Saya akan mencoba untuk tidak mengulangi banyak hal yang dikatakan orang lain, Anda dapat dengan mudah menggunakan 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 simbol-simbol seperti sintaks) atau bahkan dunia CoffeeScript, itu akan menjadi sangat alami bagi Anda - menulis mixin, fungsi dan umumnya setiap barang yang dapat digunakan kembali di .sassjauh lebih 'mudah' dan mudah dibaca daripada di .scss (subyektif).

Kekurangan SASS

  • whitespace sensitif (subyektif), saya tidak keberatan dalam bahasa lain tetapi di sini di CSS itu hanya mengganggu saya (masalah: menyalin, tab vs perang ruang, dll).
  • tidak ada aturan inline (ini adalah game breaking untuk saya), Anda tidak bisa melakukannya body color: red seperti yang Anda bisa di .scss body {color: red}
  • mengimpor barang-barang vendor lain, menyalin cuplikan CSS vanili - bukan tidak mungkin tetapi sangat membosankan setelah beberapa waktu. Solusinya adalah memiliki .scss file (bersama dengan .sass file) dalam 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 .sass dan kode yang benar-benar akan dikompilasi ke CSS .scss jika mungkin (yaitu Visual studio tidak memiliki dukungan untuk .sass tetapi setiap kali saya bekerja di proyek Rails saya biasanya menggabungkan dua dari mereka, bukan dalam satu file ofc).

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

Dan akhirnya mixin untuk .scss vs .sass perbandingan 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

57
2018-05-13 14:16



Dari homepage bahasa

Sass memiliki dua sintaks. Utama baru   sintaks (seperti dari Sass 3) dikenal sebagai   "SCSS" (untuk "Sassy CSS"), dan adalah a   superset dari sintaks CSS3. Ini berarti   bahwa setiap stylesheet CSS3 yang valid adalah   SCSS yang valid juga. File SCSS menggunakan file   ekstensi .scss.

Kedua, sintaks yang lebih tua dikenal sebagai   sintaks indentasi (atau hanya "Sass").   Terinspirasi oleh kesombongan Haml, itu   ditujukan untuk orang yang lebih suka   kepekatan atas kesamaan ke CSS.   Bukannya tanda kurung dan titik koma, itu   menggunakan indentasi baris ke   tentukan blok. Meski tidak lagi   sintaksis primer, sintaks indentasi   akan terus didukung. File   dalam menggunakan sintaks indentasi   ekstensi .ass.

SASS adalah sebuah ditafsirkan bahasa yang memuntahkan CSS. Struktur Sass terlihat seperti CSS (jarak jauh), tetapi tampaknya bagi saya bahwa uraiannya agak menyesatkan; nya tidak pengganti CSS, atau ekstensi. Ini adalah seorang penerjemah yang mengeluarkan CSS pada akhirnya, jadi Sass masih memiliki batasan-batasan CSS normal, tetapi itu menyamarkan mereka dengan kode sederhana.


45
2018-04-13 19:27



Kelancangan (Lembar Style Syntactically Awesome) memiliki dua sintaks:

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

Jadi mereka berdua bagian dari Kelancangan preprocessor dengan dua kemungkinan sintaks yang berbeda.

Perbedaan terpenting antara SCSS dan asli Kelancangan:

SCSS:

  • Sintaksnya mirip dengan CSS.
  • Gunakan kawat gigi {}.
  • Gunakan semi-titik dua ;.
  • Variabel masuk SCSS aku s $.
  • Tanda persetujuan masuk SCSS aku s :.
  • File menggunakan sintaks ini memiliki file .scss perpanjangan.

Asli Kelancangan:

  • Sintaksnya mirip dengan Rubi.
  • Di sini tidak ada penggunaan kawat gigi.
  • Tidak ada lekukan yang ketat.
  • Tidak ada titik dua.
  • Variabel masuk Kelancangan aku s ! dari pada $.
  • Penandatanganan tugas masuk Kelancangan aku s = dari pada :.
  • File menggunakan sintaks ini memiliki file .kelancangan perpanjangan.

Ini adalah dua sintaks yang tersedia untuk Kelancangan.

Beberapa lebih suka Kelancangan, sintaks asli - sementara yang lain lebih suka SCSS. Either way, tetapi perlu dicatat bahwa Sass sintaks indent 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

REFERENSI SASS


37
2018-04-10 11:16



Perbedaan dasarnya adalah sintaksis. Sementara SASS memiliki sintaks yang longgar dengan ruang putih dan tidak ada titik koma, SCSS lebih menyerupai CSS.


18
2018-05-06 10:36



Asli sass adalah sintaks seperti ruby, mirip dengan ruby, jade dll ...

Di dalam syntax itu, kami tidak menggunakannya {}, bukannya kita pergi dengan spasi putih, juga tidak ada penggunaan ;...

Di scss syntaxes lebih seperti CSS, tetapi dengan mendapatkan lebih banyak opsi seperti: bersarang, menyatakan, dll, mirip dengan less dan pra-pemrosesan lainnya CSS ...

Mereka pada dasarnya melakukan hal yang sama, tetapi saya menempatkan 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;
}

9
2017-07-02 04:51



Sass adalah yang pertama, dan Sintaksnya sedikit berbeda. Misalnya, termasuk mixin:

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

Sass mengabaikan kurung kurawal dan titik dua dan berbaring bersarang, yang menurut saya lebih bermanfaat.


8
2018-04-11 13:25



Perbedaan antara SASS dan SCSS Artikel menjelaskan perbedaan dalam detail. Jangan bingung dengan opsi SASS dan SCSS, meskipun saya juga awalnya, .scss adalah Sassy CSS dan merupakan generasi berikutnya .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 kami gunakan; untuk memisahkan deklarasi. Saya bahkan telah menambahkan semua deklarasi untuk .border ke satu baris untuk mengilustrasikan hal ini lebih lanjut. Sebaliknya, kode SASS di bawah ini harus pada baris yang berbeda dengan indentasi dan tidak ada gunanya;

/* 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 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 hari-hari ini jika seseorang menyebutkan bahwa mereka bekerja dengan Sass yang mereka maksud untuk menulis di .scss daripada cara tradisional.


4
2018-05-02 05:40



SASS adalah singkatan dari StyleSheet yang Syntactically Awesome. Ini adalah perpanjangan   CSS yang menambahkan kekuatan dan keanggunan ke bahasa dasar. SASS adalah   baru disebut sebagai SCSS dengan beberapa chages, tetapi yang lama SASS juga   sana. Sebelum Anda menggunakan SCSS atau SASS silakan lihat perbedaan di bawah ini.

enter image description here


2
2017-07-19 13:20