informasi kontak saya
Surat[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Sass dan SCSS adalah dua sintaksis Sass (Syntactically Awesome Stylesheets). Keduanya digunakan untuk menulis CSS yang lebih terstruktur dan mudah dipelihara. Berikut adalah perbandingan utama mereka dalam sintaksis dan fitur:
Sass (sintaks lekukan)
{}
dan titik koma;
。nav
ul
margin: 0
padding: 0
li
display: inline-block
margin-right: 5px
SCSS (CSS Sassy)
{}
dan titik koma;
。nav {
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 5px;
}
}
Keduanya mendukung variabel dan memiliki sintaks yang sama:
$primary-color: #333;
nav {
color: $primary-color;
}
Keduanya mendukung nesting, namun di Sass, nesting menggunakan indentasi, sedangkan di SCSS, kurung kurawal digunakan:
// Sass
nav
ul
margin: 0
padding: 0
// SCSS
nav {
ul {
margin: 0;
padding: 0;
}
}
Definisi dan pemanggilan mixer sama di keduanya:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
Interpolasi digunakan sama di keduanya:
$side: left;
.margin-#{$side} {
margin-#{$side}: 10px;
}
Keduanya mendukung operasi dalam gaya:
.container {
width: 100% - 20px;
}
Keduanya mendukung pewarisan gaya:
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
Saya akan menambahkannya di sini lain kali saya menggunakannya dalam proyek saya!