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?
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?
Jawaban:
Selain jawaban Idriss :
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;
}
Di SCSS kita dapat mempersingkat kode ini menggunakan a @mixin
sehingga kita tidak perlu menulis color
dan width
properti 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;
}
}
Namun dalam SASS, keseluruhan struktur secara visual lebih cepat dan lebih bersih daripada SCSS.
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 CSS
lembar gaya untuk browser, dan sebagai informasi, SASS
menambahkan banyak fungsi tambahan untuk CSS
menyukai variabel, bersarang, dan lainnya yang dapat membuat penulisan CSS
lebih mudah dan lebih cepat.
File SCSS diproses oleh server yang menjalankan aplikasi web untuk menghasilkan keluaran tradisional CSS
yang dapat dipahami browser Anda.
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.
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
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