Apa perbedaan antara CSS dan SCSS?

Saya tahu CSS dengan sangat baik, tetapi saya bingung tentang Sass. Apa perbedaan SCSS dari CSS, dan jika saya menggunakan SCSS, bukan CSS, apakah akan berfungsi sama?

Selain jawaban Idriss :

CSS

Di CSS kami menulis kode seperti yang digambarkan di bawah ini, dengan panjang penuh.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

Di SCSS kita dapat mempersingkat kode ini menggunakan a @mixinsehingga kita tidak perlu menulis colordan widthproperti lagi dan lagi. Kita dapat mendefinisikan ini melalui suatu fungsi, mirip dengan PHP atau bahasa lain.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

KELANCANGAN

Namun dalam SASS, keseluruhan struktur secara visual lebih cepat dan lebih bersih daripada SCSS.

• Peka terhadap ruang kosong saat Anda menggunakan salin dan tempel,

• Tampaknya saat ini tidak mendukung CSS sebaris.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color

CSS adalah bahasa gaya yang dipahami browser mana pun untuk mendesain halaman web.

SCSS adalah jenis file khusus untuk SASS, program yang ditulis dalam Ruby yang merakit CSSlembar gaya untuk browser, dan sebagai informasi, SASSmenambahkan banyak fungsi tambahan untuk CSSmenyukai variabel, bersarang, dan lainnya yang dapat membuat penulisan CSSlebih mudah dan lebih cepat.
File SCSS diproses oleh server yang menjalankan aplikasi web untuk menghasilkan keluaran tradisional CSSyang dapat dipahami browser Anda.

cssmemiliki variabel juga. Anda dapat menggunakannya seperti ini:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

Dan ini kurang

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Definisi variabel benar:

$      => SCSS, SASS
--     => CSS
@      => LESS

Semua jawaban bagus tapi pertanyaannya sedikit berbeda dari jawaban

"tentang Sass. Apa perbedaan SCSS dari CSS" : scss adalah sintaks CSS3 yang dibentuk dengan baik . menggunakan preprocessor sass untuk membuatnya.

dan jika saya menggunakan SCSS, bukan CSS, apakah akan berfungsi sama? Iya. jika ide Anda mendukung preprocessor sass. daripada itu akan bekerja sama.

Sass memiliki dua sintaks. Sintaks yang paling umum digunakan dikenal sebagai "SCSS" (untuk "Sassy CSS"), dan merupakan superset dari sintaks CSS3. Ini berarti bahwa setiap lembar gaya CSS3 yang valid juga merupakan SCSS yang valid. File SCSS menggunakan ekstensi .scss.

Kedua, sintaks lama dikenal sebagai sintaks indentasi (atau hanya ".sass"). Terinspirasi oleh ketegasan Haml, ini ditujukan untuk orang yang lebih memilih keringkasan daripada kesamaan dengan CSS. Alih-alih tanda kurung dan titik koma, ia menggunakan indentasi baris untuk menentukan blok. File dalam sintaksis berlekuk menggunakan ekstensi .sass.

• Informasi Lebih Lanjut Tentang:

Apa Itu CSS Preprocessor?

CSS itu sendiri tidak memiliki logika dan fungsionalitas kompleks yang diperlukan untuk menulis kode yang dapat digunakan kembali dan terorganisir. Akibatnya, pengembang terikat oleh batasan dan akan menghadapi kesulitan ekstrim dalam pemeliharaan kode dan skalabilitas, terutama saat mengerjakan proyek besar yang melibatkan kode ekstensif dan beberapa lembar gaya CSS. Di sinilah CSS Preprocessor datang untuk menyelamatkan.

Sebuah CSS Preprocessor adalah alat yang digunakan untuk memperluas fungsionalitas dasar dari default vanilla CSS melalui bahasa skripnya sendiri. Ini membantu kita untuk menggunakan sintaks logis yang kompleks seperti - variabel, fungsi, mixin, kode bersarang, dan pewarisan untuk beberapa nama, supercharging CSS vanilla Anda. Dengan menggunakan CSS Preprocessor, Anda dapat dengan mulus mengotomatiskan tugas-tugas kasar, membuat cuplikan kode yang dapat digunakan kembali, menghindari pengulangan kode dan pembengkakan serta menulis blok kode bersarang yang tertata dengan baik dan mudah dibaca. Namun, browser hanya dapat memahami kode CSS vanilla asli dan tidak akan dapat menafsirkan sintaks Preprocessor CSS. Oleh karena itu, sintaks Preprocessor yang kompleks dan canggih harus terlebih dahulu dikompilasi menjadi sintaks CSS asli yang kemudian dapat diinterpretasikan oleh browser untuk menghindari masalah kompatibilitas lintas browser.

Selanjutnya dalam artikel ini, kita akan melihat 3 Preprocessor CSS paling populer yang saat ini digunakan oleh developer di seluruh dunia yaitu Sass, LESS, dan Stylus. Sebelum Anda memutuskan pemenang antara Sass vs LESS vs Stylus, beri tahu kami terlebih dahulu secara detail.

Sass - Style Sheets yang Luar Biasa Secara Sintaksis

Sass adalah singkatan dari "Syntactically Awesome Style Sheets". Sass bukan hanya Preprocessor CSS paling populer di dunia tetapi juga salah satu yang tertua, diluncurkan pada tahun 2006 oleh Hampton Catlin dan kemudian dikembangkan oleh Natalie Weizenbaum. Meskipun Sass ditulis dalam bahasa Ruby, Precompiler LibSass memungkinkan Sass untuk diurai dalam bahasa lain dan memisahkannya dari Ruby. Sass memiliki komunitas aktif yang sangat besar dan sumber belajar ekstensif yang tersedia di internet untuk pemula. Berkat kematangan, stabilitas, dan kecakapan logis yang kuat, Sass telah memantapkan dirinya di garis depan CSS Preprocessor di depan rekan-rekan pesaingnya.

Sass dapat ditulis dalam 2 sintaks baik menggunakan Sass atau SCSS. Apa perbedaan diantara keduanya? Mari kita cari tahu.

Pernyataan Sintaks: Sass vs SCSS

• SCSS adalah singkatan dari Sassy CSS. Tidak seperti Sass, SCSS tidak didasarkan pada lekukan.
• Ekstensi .sass digunakan sebagai sintaks asli untuk Sass, sementara SCSS menawarkan sintaks yang lebih baru dengan ekstensi .scss.
• Tidak seperti Sass, SCSS memiliki tanda kurung kurawal dan titik koma, seperti CSS.
• Berlawanan dengan SCSS, Sass sulit dibaca karena sangat menyimpang dari CSS. Itulah mengapa SCSS menjadi sintaks Sass yang lebih direkomendasikan karena lebih mudah dibaca dan sangat mirip dengan Native CSS sambil pada saat yang sama menikmati dengan kekuatan Sass.

Pertimbangkan contoh di bawah ini dengan sintaks Sass vs SCSS bersama dengan kode CSS Terkompilasi.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

Dalam kedua kasus, baik itu Sass atau SCSS, kode CSS yang dikompilasi akan sama -

#box {
      color: #fff;
      background: #00f;

Penggunaan Sass

Bisa dibilang kerangka kerja ujung depan paling populer Bootstrap ditulis dalam Sass. Hingga versi 3, Bootstrap ditulis dengan LESS tetapi bootstrap 4 mengadopsi Sass dan meningkatkan popularitasnya. Beberapa perusahaan besar yang menggunakan Sass adalah - Zapier, Uber, Airbnb, dan Kickstarter.

KURANG - Lembar Gaya Leaner

LESS adalah singkatan dari “Leaner Stylesheets”. Ini dirilis pada tahun 2009 oleh Alexis Sellier, 3 tahun setelah peluncuran awal Sass pada tahun 2006. Sementara Sass ditulis dalam Ruby, LESS ditulis dalam JavaScript. Faktanya, LESS adalah pustaka JavaScript yang memperluas fungsionalitas CSS vanilla asli dengan mixin, variabel, bersarang, dan loop kumpulan aturan. Sass vs LESS telah menjadi perdebatan sengit. Tidak mengherankan bahwa LESS adalah pesaing terkuat Sass dan memiliki basis pengguna terbesar kedua. Namun, Ketika bootstrap membuang LESS untuk mendukung Sass dengan peluncuran Bootstrap 4, LESS telah berkurang popularitasnya. Salah satu dari sedikit kelemahan LESS dibandingkan Sass adalah tidak mendukung fungsi. Tidak seperti Sass, LESS menggunakan @ untuk mendeklarasikan variabel yang dapat menyebabkan kebingungan dengan @media dan @keyframes. Namun, Salah satu keunggulan utama LESS dibandingkan Sass dan Stylus atau praprosesor lainnya, adalah kemudahan menambahkannya ke dalam proyek Anda. Anda dapat melakukannya baik dengan menggunakan NPM atau dengan memasukkan file Less.js. Deklarasi Sintaks: LESS Menggunakan ekstensi .less. Sintaks LESS sangat mirip dengan SCSS dengan pengecualian bahwa untuk mendeklarasikan variabel, alih-alih $ tanda, LESS menggunakan @.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Usage Of LESS Framework Bootstrap yang populer hingga peluncuran versi 4 ditulis dengan LESS. Namun, kerangka kerja populer lainnya yang disebut SEMANTIC UI masih ditulis dalam LESS. Di antara perusahaan besar yang menggunakan Sass adalah - Indiegogo, Patreon, dan WeChat

Stylus

Stylus diluncurkan pada 2010 oleh mantan pengembang Node JS TJ Holowaychuk, hampir 4 tahun setelah rilis Sass dan 1 tahun setelah rilis LESS. Stylus ditulis Node JS dan sangat cocok dengan tumpukan JS. Stylus sangat dipengaruhi oleh kecakapan logis Sass dan kesederhanaan LESS. Meskipun Stylus masih populer di kalangan pengembang Node JS, ia belum berhasil mengukir bagian yang cukup besar untuk dirinya sendiri. Salah satu keunggulan Stylus dibandingkan Sass atau LESS, adalah ia dipersenjatai dengan fungsi built-in yang sangat kuat dan mampu menangani komputasi berat.

Pernyataan Sintaks: Stylus Menggunakan ekstensi .styl. Stylus menawarkan banyak fleksibilitas dalam menulis sintaks, mendukung CSS asli serta memungkinkan penghilangan tanda titik dua dan titik koma. Juga, perhatikan bahwa Stylus tidak menggunakan simbol @ atau $ untuk mendefinisikan variabel. Sebagai gantinya, Stylus menggunakan operator penugasan untuk menunjukkan deklarasi variabel.

STYLUS SYNTAX TERTULIS SEPERTI CSS ASLI

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

ATAU

STYLUS SYNTAX TANPA CURLY BRACES

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

ATAU

STYLUS SYNTAX TANPA KOLON DAN SEMIKOLON

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color